Skip to main content

Bug Tracker

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 addyosmani comment:1

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.

Changed June 07, 2011 10:49AM UTC by anonymous 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 anonymous 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 rwaldron comment:4

Changed June 07, 2011 02:27PM UTC by alyosha47 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 anonymous comment:6

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?

Changed June 09, 2011 07:44PM UTC by timmywil 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 anonymous 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.