Photo toggle not coming into view after hiding

Question

I want a photo/caption to be toggled on a webpage.
The user clicks, the photo comes up followed by the caption.
The user clicks again, the caption goes away then the photo goes away.
The user clicks, the photo comes up followed by the caption.

On the third click, the photo rapidly appears (does not animate). Here is my code.
(jQuery-1.8.1.min.js)

    $(document).ready(function() {
      $('#photo').width(0).height(0).css('opacity',0);
      $('#caption').hide();
      $('#box').toggle(
       function() {
       $('#photo').stop().show().animate(
         {
           width: '400px',
           height: '300px',
           opacity: 1
         }, 500, function() {
           $('#caption').stop().fadeIn(500);
         }); //end animate
      },
      function() {
        $('#caption').stop().hide(function() {
          $('#photo').stop().fadeOut(500);
        });
       }       
     ); // end toggle
   });

Any suggestions?
Need more code?

UPDATE
In order to get the image to animate-in every time it is toggled, then the image has to animate-out.

EDIT2
updated the JSFIDDLE
EDIT:
Another problem showed up, this time with animation.
The jsFiddle works fine but when used with an actual image it does not animate after the first cycle.

Which element has the content class applied to it? Are you sure that your toggle handler is firing? Perhaps add a console.log("toggle - show"); to the end of the first function and console.log("toggle - hide"); to the end of the second then confirm in web inspector that the handler is executing each time you click. — jacobq, Sep 21 '12 at 16:35
@billy and iX3 I changed the element to 'html'. The goal is that the user clicks anywhere on the page and the photo/caption appear/disappear — user1460015, Sep 21 '12 at 16:42
@user1460015 Is the problem with the showing and hiding or with catching the the click event anywhere on the page? See http://stackoverflow.com/questions/714471/jquery-hide-element-when-clicked-anywhere-on-the-page — jacobq, Sep 21 '12 at 16:49
@iX3 the problem is showing the image after the first time around. Everything catches properly but after cycling through the toggle the image does not show... just the caption — user1460015, Sep 21 '12 at 17:39

billy · Answer 1 · 2012-09-21T18:56:38.967

1

EDIT 3: updated code to work after one cycle : http://jsfiddle.net/kLEFy/17/

$(document).ready(function() {
    $('#photo').width(0).height(0).css('opacity', 0);
    $('#caption').hide();
    $('body').toggle(
        function() {
            $('#photo').stop().show().animate({
                width: '400px',
                height: '300px',
                opacity: 1
            }, 1000, function() {
                $('#caption').stop().fadeIn(1000);
            }); //end animate
        }, 
        function() {
            $('#caption').stop().hide(function(){
                $('#photo').stop().fadeOut();
                $('#photo').width(0).height(0).css('opacity', 0);
            });
        }
    );
});

edited Sep 21 '12 at 18:56

answered Sep 21 '12 at 16:23

billy

1,165
9
23

I'd like to keep using the toggle() event. – user1460015 Sep 21 '12 at 16:43
Thanks. It does work. But when I try that with an actual image the image stops appearing after the first cycle. Only the caption shows up. I wonder if this has to do with caching or something (overflow: hidden)? – user1460015 Sep 21 '12 at 17:41
See below... I got it working but the animation is avoided after the first cycle through – user1460015 Sep 21 '12 at 17:50

jacobq · Accepted Answer · 2012-09-21T17:56:52.793

1

I'm trying to stick with your original code (I just added .show() in between the photo's stop and animate calls), but I can't see what's wrong. It seems to work, see jsFiddle here.

UPDATE: I changed the "hide" function per poster's request & also updated the jsFiddle code to reflect this.

$(document).ready(function() {
    $('#photo').width(0).height(0).css('opacity', 0);
    $('#caption').hide();
    $('button').toggle(
        function() {
            console.log("show");
            $('#photo').stop().show().animate({
                width: '400px',
                height: '300px',
                opacity: 1
            }, 100, function() {
                $('#caption').stop().fadeIn(1000);
            }); //end animate
        }, 
        function() {
            console.log("hide");
            $('#caption').stop().hide(function(){
                $('#photo').stop().animate({
                    width: '0px',
                    height: '0px',
                    opacity: 0
                }, 100);
            });
        }
    );
});

edited Sep 21 '12 at 17:56

answered Sep 21 '12 at 16:47

jacobq

11,209
4
40
71

I changed your button to a
. It works. I can't see where mine doesn't.
– user1460015 Sep 21 '12 at 17:28
Ok... so the image is popping up now... got that part working. Thanks. After the first cycle through, the image pops in but the `animate` part is completely avoided. In other words, the image just pops in rapidly, fadesOut, pop-in, fadeOut. The animation is completely voided. – user1460015 Sep 21 '12 at 17:45
I think that's because you're not "shrinking" it back down when you hide it. I'll update the jsFiddle in a moment. – jacobq Sep 21 '12 at 17:53
That did. Is it always true that if you cause an image to 'animate' out (or fadeIn, etc) and you would like to repeat it, then you have to 'animate( or fadeOut, etc) exactly the same as it came in? Thanks for the help. – user1460015 Sep 21 '12 at 18:15
You can make it do whatever you want. Just realize that if you leave it in a certain state (say, 400px wide and 300px tall) then you tell jQuery to animate it to that state, it's not going to do anything because there's nothing to do (it's already 400px wide and 300px tall). It just changes when you tell it to. You might want to refactor your code to use a standard transition function rather than define it inline each time though, for example. – jacobq Sep 21 '12 at 19:36

Photo toggle not coming into view after hiding

2 Answers2