Side navigation
#9536 closed bug (invalid)
Opened June 07, 2011 08:11AM UTC
Closed June 07, 2011 10:43AM UTC
Last modified June 09, 2011 07:45PM UTC
animate makes hidden element visible
| Reported by: | garbage@1iturtle.com | Owned by: | |
|---|---|---|---|
| Priority: | low | Milestone: | 1.next |
| Component: | effects | Version: | 1.5.1 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
The code is very simple, and will work as-is for demonstration purposes:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('img').hide(0,function(){
$(this).animate({'width':'200px','height':'200px'},{'duration':1000});
});
});
</script>
</head>
<body>
<div id="imageholder">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/f/f2/Core_Image_icon.png/96px-Core_Image_icon.png">
</div>
</body>
</html>
I would expect the <img> object to first be hidden, and then resized, *but to remain hidden*.
However, it is hidden, and then becomes immediately visible again as soon as the animate() begins.
regardless of the duration of the hide() or if I replace hide with another hiding function like fadeOut, this persists.
I'm using firefox and safari in osx.
Thanks for all your incredible work!!!
Attachments (0)
Change History (8)
Changed June 07, 2011 10:43AM UTC by comment:1
| component: | unfiled → effects |
|---|---|
| priority: | undecided → low |
| resolution: | → invalid |
| status: | new → closed |
Changed June 07, 2011 10:49AM UTC by comment:2
Thanks, but in the original, much lengthier file from which I distilled this code, the items in question had been hidden for a long time already, before the animate() ever gets called. Yet still, the moment the animate() begins, the previously hidden items become visible.
Changed June 07, 2011 01:10PM UTC by comment:3
Replying to [comment:1 addyosmani]:
Thanks, but in the original, much lengthier file from which I distilled this code, the items in question had been hidden for a long time already, before the animate() ever gets called. Yet still, the moment the animate() begins, the previously hidden items become visible.
Changed June 07, 2011 02:09PM UTC by comment:4
Works for me: http://jsfiddle.net/rwaldron/kVAAz/3/
Changed June 07, 2011 02:27PM UTC by comment:5
Replying to [comment:4 rwaldron]:
Works for me: http://jsfiddle.net/rwaldron/kVAAz/3/
Yes in jsfiddle it works. But if you take the original and identical code and plug it directly into firefox, it does not. Not for me anyway, nor in Safari, nor Chrome.
Changed June 09, 2011 05:26PM UTC by comment:6
so it seems like what I'm experiencing is a known ''feature''. I found this in the jquery FAQ:
does this mean that there is no way to animate the size of an object while keeping it invisible?
Changed June 09, 2011 07:44PM UTC by comment:7
I don't see a use case for that unless you want to indirectly affect the positioning of other elements while visibility is hidden, but in that case why not affect those elements directly instead? An animation no one sees is not really worth the processing time.
Changed June 09, 2011 07:45PM UTC by comment:8
the use I see for it is that I could use the same code to re-size and -position an element regardless of whether it is hidden or not.
Thanks for submitting a ticket to the jQuery Project. I've recreated your test case here: http://jsfiddle.net/addyosmani/kVAAz/1/. Reviewing what occurs, I believe the issue you're experiencing is because you're using jQuery to hide the element initially rather than just CSS (meaning that there is a chance, albeit small) that a minor delay may be incurred due to jQuery waiting for the DOM to finish loading. This is probably where you're seeing with .hide(), given that the image probably has enough time to load during this delay. Please try hiding initially with CSS as I believe this should solve any display issues.