隐藏后照片切换不显示

Question

我希望在网页上切换照片/标题。
用户点击，照片出现，然后是标题。
用户再次单击，标题消失，然后照片消失。
用户点击，照片出现，然后是标题。

在第三次单击时，照片会迅速出现（不动画）。 这是我的代码。
(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
   });

有什么建议吗？
需要更多代码？

更新
为了让图像在每次切换时都进行动画处理，然后图像必须进行动画处理。

EDIT2
更新了 JSFIDDLE
编辑：
另一个问题出现了，这次是动画。
jsFiddle 工作正常，但与实际图像一起使用时，它在第一个循环后不会动画。

Answer 1

我正在尝试使用您的原始代码（我刚刚在照片的停止和动画调用之间添加了 .show()），但我看不出有什么问题。它似乎有效，see jsFiddle here。

更新：我根据发帖者的要求更改了“隐藏”功能，还更新了 jsFiddle 代码以反映这一点。

$(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);
            });
        }
    );
});