Bug Tracker

#8243 closed bug (invalid)

Opened February 11, 2011 01:09AM UTC

Closed March 21, 2011 07:57AM UTC

Last modified March 14, 2012 12:30PM UTC

animate element with children with width and height set to 50%

Reported by: brandnewdejavu Owned by: brandnewdejavu
Priority: undecided Milestone: 1.next
Component: effects Version: 1.5
Keywords: Cc:
Blocked by: Blocking:
Description

I have a more complex project using animate.

I watered it down as much as I could to illustrate the problems I'm seeing with animate reducing the height and width to 50% for an element and it's children.

You can see the code in action at http://www.sovsite.com/index4.php.

The more complex code is at http://www.sovsite.com. If you care to you can see what reducing to 50% and then enlarging to 50% is doing.

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>asd</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style>
.card
{
  position: relative;
  height: 700px;
  width: 800px;
  margin: 0px;
  padding: 0px;
  border: 1px solid red;
}

.content_top
{
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  width: 500px;
  height: 20px;
  position: relative;
}

.content
{
  border-left: 1px solid black;
  border-right: 1px solid black;
  position: relative;
  width: 500px;
  height: 400px;
}

.content_bottom
{
  border-right: 1px solid black;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  width: 500px;
  height: 20px;
  position: relative;
}
</style>
<script>
$(document).ready(function()
{
   $('#first').click(function(event) {
        $("#first").animate({
        width: "50%",
        height: "50%",
        }, 4000, function() {
        });
        $("#first").children().animate({
        width: "50%",
        height: "50%",
        }, 4000, function() {
        });
   })
});

</script>
</head>
<body>
     <div id="first" class="card">
          <div class="content_top"></div>
          <div class="content">first</div>
          <div class="content_bottom"></div>
     </div>
</body>
</html>
Attachments (0)
Change History (13)

Changed February 11, 2011 01:14AM UTC by brandnewdejavu comment:1

You don't need the <link rel="stylesheet" type="text/css" href="css/ssllc2.css" />

Changed February 11, 2011 01:36AM UTC by jitter comment:2

component: unfiled → effects
description: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> \ <html xmlns="http://www.w3.org/1999/xhtml"> \ <head> \ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> \ <title>Sovereign Sites, L.L.C. - Internet Development</title> \ <link rel="stylesheet" type="text/css" href="css/ssllc2.css" /> \ <script type="text/javascript" src="js/jquery-1.5.js"></script> \ <style> \ .card \ { \ position: relative; \ height: 700px; \ width: 800px; \ margin: 0px; \ padding: 0px; \ border: 1px solid red; \ } \ \ .content_top \ { \ border-top: 1px solid black; \ border-left: 1px solid black; \ border-right: 1px solid black; \ width: 500px; \ height: 20px; \ position: relative; \ } \ \ .content \ { \ border-left: 1px solid black; \ border-right: 1px solid black; \ position: relative; \ width: 500px; \ height: 400px; \ } \ \ .content_bottom \ { \ border-right: 1px solid black; \ border-left: 1px solid black; \ border-bottom: 1px solid black; \ width: 500px; \ height: 20px; \ position: relative; \ } \ </style> \ <script> \ $(document).ready(function() \ { \ $('#first').click(function(event) { \ $("#first").animate({ \ width: "50%", \ height: "50%", \ }, 4000, function() { \ }); \ $("#first").children().animate({ \ width: "50%", \ height: "50%", \ }, 4000, function() { \ }); \ }) \ }); \ \ I have a more complex project using animate. \ \ I watered it down as much as I could to illustrate the problems I'm seeing with animate reducing the height and width to 50% for an element and it's children. \ \ You can see the code in action at http://www.sovsite.com/index4.php. \ \ The more complex code is at http://www.sovsite.com. If you care to you can see what reducing to 50% and then enlarging to 50% is doing. \ \ Here's the code: \ \ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> \ <html xmlns="http://www.w3.org/1999/xhtml"> \ <head> \ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> \ <style> \ .card \ { \ position: relative; \ height: 700px; \ width: 800px; \ margin: 0px; \ padding: 0px; \ border: 1px solid red; \ } \ \ .content_top \ { \ border-top: 1px solid black; \ border-left: 1px solid black; \ border-right: 1px solid black; \ width: 500px; \ height: 20px; \ position: relative; \ } \ \ .content \ { \ border-left: 1px solid black; \ border-right: 1px solid black; \ position: relative; \ width: 500px; \ height: 400px; \ } \ \ .content_bottom \ { \ border-right: 1px solid black; \ border-left: 1px solid black; \ border-bottom: 1px solid black; \ width: 500px; \ height: 20px; \ position: relative; \ } \ </style> \ <script> \ $(document).ready(function() \ { \ $('#first').click(function(event) { \ $("#first").animate({ \ width: "50%", \ height: "50%", \ }, 4000, function() { \ }); \ $("#first").children().animate({ \ width: "50%", \ height: "50%", \ }, 4000, function() { \ }); \ }) \ }); \ \ </script> \ </head> \ <body> \ <div id="first" class="card"> \ <div class="content_top"></div> \ <div class="content">first</div> \ <div class="content_bottom"></div> \ </div> \ </body> \ </html> → I have a more complex project using animate. \ \ I watered it down as much as I could to illustrate the problems I'm seeing with animate reducing the height and width to 50% for an element and it's children. \ \ You can see the code in action at http://www.sovsite.com/index4.php. \ \ The more complex code is at http://www.sovsite.com. If you care to you can see what reducing to 50% and then enlarging to 50% is doing. \ \ Here's the code: \ {{{ \ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> \ <html xmlns="http://www.w3.org/1999/xhtml"> \ <head> \ <title>asd</title> \ <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> \ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> \ <style> \ .card \ { \ position: relative; \ height: 700px; \ width: 800px; \ margin: 0px; \ padding: 0px; \ border: 1px solid red; \ } \ \ .content_top \ { \ border-top: 1px solid black; \ border-left: 1px solid black; \ border-right: 1px solid black; \ width: 500px; \ height: 20px; \ position: relative; \ } \ \ .content \ { \ border-left: 1px solid black; \ border-right: 1px solid black; \ position: relative; \ width: 500px; \ height: 400px; \ } \ \ .content_bottom \ { \ border-right: 1px solid black; \ border-left: 1px solid black; \ border-bottom: 1px solid black; \ width: 500px; \ height: 20px; \ position: relative; \ } \ </style> \ <script> \ $(document).ready(function() \ { \ $('#first').click(function(event) { \ $("#first").animate({ \ width: "50%", \ height: "50%", \ }, 4000, function() { \ }); \ $("#first").children().animate({ \ width: "50%", \ height: "50%", \ }, 4000, function() { \ }); \ }) \ }); \ \ </script> \ </head> \ <body> \ <div id="first" class="card"> \ <div class="content_top"></div> \ <div class="content">first</div> \ <div class="content_bottom"></div> \ </div> \ </body> \ </html> \ }}}

Cleaned up description

Changed February 11, 2011 02:56AM UTC by dejavu comment:3

I made it simpler. It collapses when finished. You can see it at http://www.sovsites.com/index5.php.

<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 StrictEN" "http:www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

<meta name="author" content="Margaret M. Waldman">

<script type="text/javascript" src="js/jquery-1.5.js"></script>

<style>

.card

{

position: relative;

height: 200px;

width: 400px;

margin: 0px;

padding: 0px;

border: 1px solid red;

}

</style>

<script>

$(document).ready(function()

{

$('#but').click(function(event) {

$("#first").animate({

width: "25%",

}, 4000, function() {

});

$("#first").animate({

height: "25%",

}, 4000, function() {

});

})

});

</script>

</head>

<body>

<input id="but" type="button" value="click" />

<div id="first" class="card">

</div>

</body>

</html>

Changed February 13, 2011 02:15PM UTC by brandnewdejavu comment:4

Now, this almost works.

<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 StrictEN" "http:www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

<meta name="author" content="Margaret M. Waldman">

<script type="text/javascript" src="js/jquery-1.5.js"></script>

<style>

.card

{

position: relative;

height: 700px;

width: 800px;

margin: 0px;

padding: 0px;

border: 1px solid red;

}

.content_top

{

border-top: 1px solid black;

border-left: 1px solid black;

border-right: 1px solid black;

width: 500px;

height: 20px;

position: relative;

}

.content

{

border-left: 1px solid black;

border-right: 1px solid black;

position: relative;

width: 500px;

height: 400px;

}

.content_bottom

{

border-right: 1px solid black;

border-left: 1px solid black;

border-bottom: 1px solid black;

width: 500px;

height: 20px;

position: relative;

}

</style>

<script>

$(document).ready(function()

{

$('#first').click(function(event) {

$("#first").animate({

width: "400px",

height: "350px",

}, 4000, function() {

});

$("#first").children().animate({

width: "50%",

}, 4000, function() {

});

$("#first").children().animate({

height: "50%",

}, 4000, function() {

});

})

});

</script>

</head>

<body>

<div id="first" class="card">

<div class="content_top"></div>

<div class="content">first</div>

<div class="content_bottom"></div>

</div>

</body>

</html>

Changed February 13, 2011 02:16PM UTC by anonymous comment:5

And, this does as it is supposed to.

<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 StrictEN" "http:www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

<meta name="author" content="Margaret M. Waldman">

<script type="text/javascript" src="js/jquery-1.5.js"></script>

<style>

.card

{

position: relative;

height: 700px;

width: 800px;

margin: 0px;

padding: 0px;

border: 1px solid red;

}

.content_top

{

border-top: 1px solid black;

border-left: 1px solid black;

border-right: 1px solid black;

width: 500px;

height: 20px;

position: relative;

}

.content

{

border-left: 1px solid black;

border-right: 1px solid black;

position: relative;

width: 500px;

height: 400px;

}

.content_bottom

{

border-right: 1px solid black;

border-left: 1px solid black;

border-bottom: 1px solid black;

width: 500px;

height: 20px;

position: relative;

}

</style>

<script>

$(document).ready(function()

{

$('#first').click(function(event) {

$("#first").animate({

width: "400px",

height: "350px",

}, 4000, function() {

});

$("#top").animate({

width: "250px",

height: "10px",

}, 4000, function() {

});

$("#mid").animate({

width: "250px",

height: "200px",

}, 4000, function() {

});

$("#bottom").animate({

width: "250px",

height: "10px",

}, 4000, function() {

});

})

});

</script>

</head>

<body>

<div id="first" class="card">

<div id="top" class="content_top"></div>

<div id="mid" class="content">first</div>

<div id="bottom" class="content_bottom"></div>

</div>

</body>

</html>

Changed February 13, 2011 02:20PM UTC by anonymous comment:6

But, it would be super nifty if the 50% worked for an element and it's children.

Changed February 13, 2011 02:27PM UTC by anonymous comment:7

Isn't this cute. But, the font almost seems to be jumping.

<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 StrictEN" "http:www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

<meta name="author" content="Margaret M. Waldman">

<script type="text/javascript" src="js/jquery-1.5.js"></script>

<style>

.card

{

position: relative;

height: 700px;

width: 800px;

margin: 0px;

padding: 0px;

border: 1px solid red;

}

.content_top

{

border-top: 1px solid black;

border-left: 1px solid black;

border-right: 1px solid black;

width: 500px;

height: 20px;

position: relative;

}

.content

{

border-left: 1px solid black;

border-right: 1px solid black;

position: relative;

width: 500px;

height: 400px;

}

.content_bottom

{

border-right: 1px solid black;

border-left: 1px solid black;

border-bottom: 1px solid black;

width: 500px;

height: 20px;

position: relative;

}

</style>

<script>

$(document).ready(function()

{

$('#first').click(function(event) {

$("#first").animate({

width: "400px",

height: "350px",

}, 4000, function() {

});

$("#top").animate({

width: "250px",

height: "10px",

}, 4000, function() {

});

$("#mid").animate({

width: "250px",

height: "200px",

fontSize: "6pt",

}, 4000, function() {

});

$("#bottom").animate({

width: "250px",

height: "10px",

}, 4000, function() {

});

})

});

</script>

</head>

<body>

<div id="first" class="card">

<div id="top" class="content_top"></div>

<div id="mid" class="content">first</div>

<div id="bottom" class="content_bottom"></div>

</div>

</body>

</html>

Changed February 13, 2011 02:29PM UTC by brandnewdejavu comment:8

And, the bottom element is out of alignment with the top two elements and it is shrinking.

Changed February 13, 2011 02:38PM UTC by brandnewdejavu comment:9

Don't look at the files on http://www.sovsites.com they've changed.

Changed February 13, 2011 02:44PM UTC by brandnewdejavu comment:10

In comment:4, width works, height doesn't.

In comment: 5, the center peice is moving a one pixel off of the top and bottom.

Changed February 13, 2011 02:48PM UTC by anonymous comment:11

I don't know if anything can be done about the one pixel ahead in each statement since they are firing sequentially.

I was thinking a delay field, but that won't work.

Changed March 07, 2011 12:48AM UTC by rwaldron comment:12

owner: → brandnewdejavu
status: new → pending

Thanks for taking the time to contribute to the jQuery project! Please provide a reduced jsFiddle test case to help us assess your ticket!

Additionally, test against the jQuery 0 GIT version to ensure the issue still exists. Be Excellent to eachother!

Changed March 21, 2011 07:57AM UTC by trac-o-bot comment:13

resolution: → invalid
status: pending → closed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!