Bug Tracker

Opened 11 years ago

Closed 11 years ago

Last modified 10 years ago

#8243 closed bug (invalid)

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 (last modified by jitter)

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>

Change History (13)

comment:1 Changed 11 years ago by brandnewdejavu

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

comment:2 Changed 11 years ago by jitter

Component: unfiled → effects
Description: modified (diff)

Cleaned up description

comment:3 Changed 11 years ago by dejavu

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>

comment:4 Changed 11 years ago by brandnewdejavu

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>

comment:5 Changed 11 years ago by anonymous

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>

comment:6 Changed 11 years ago by anonymous

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

comment:7 Changed 11 years ago by anonymous

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>

comment:8 Changed 11 years ago by brandnewdejavu

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

comment:9 Changed 11 years ago by brandnewdejavu

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

comment:10 Changed 11 years ago by brandnewdejavu

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.

comment:11 Changed 11 years ago by anonymous

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.

comment:12 Changed 11 years ago by Rick Waldron

Owner: set to 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!

comment:13 Changed 11 years ago by trac-o-bot

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!

Note: See TracTickets for help on using tickets.