#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 )
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 12 years ago by
comment:2 Changed 12 years ago by
Component: | unfiled → effects |
---|---|
Description: | modified (diff) |
Cleaned up description
comment:3 Changed 12 years ago by
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 12 years ago by
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 12 years ago by
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 12 years ago by
But, it would be super nifty if the 50% worked for an element and it's children.
comment:7 Changed 12 years ago by
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 12 years ago by
And, the bottom element is out of alignment with the top two elements and it is shrinking.
comment:9 Changed 12 years ago by
Don't look at the files on http://www.sovsites.com they've changed.
comment:10 Changed 12 years ago by
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 12 years ago by
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 12 years ago by
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 12 years ago by
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!
You don't need the <link rel="stylesheet" type="text/css" href="css/ssllc2.css" />