Bug Tracker

Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#9536 closed bug (invalid)

animate makes hidden element visible

Reported by: garbage@… 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!!!

Change History (8)

comment:1 Changed 8 years ago by addyosmani

Component: unfiledeffects
Priority: undecidedlow
Resolution: invalid
Status: newclosed

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.

comment:2 Changed 8 years ago by anonymous

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.

comment:3 in reply to:  1 Changed 8 years ago by anonymous

Replying to 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.

comment:4 Changed 8 years ago by Rick Waldron

comment:5 in reply to:  4 Changed 8 years ago by alyosha47

Replying to 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.

comment:6 Changed 8 years ago by anonymous

so it seems like what I'm experiencing is a known feature. I found this in the jquery FAQ:

http://docs.jquery.com/Frequently_Asked_Questions#Why_do_animations_set_the_display_style_to_block.3F

does this mean that there is no way to animate the size of an object while keeping it invisible?

comment:7 Changed 8 years ago by timmywil

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.

comment:8 Changed 8 years ago by anonymous

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.

Note: See TracTickets for help on using tickets.