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

编辑3：更新后的代码在一个周期后工作：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);
            });
        }
    );
});

Answer 2

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

更新：我根据海报的要求更改了“隐藏”功能＆amp;还更新了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);
            });
        }
    );
});

隐藏后，照片切换不会进入视野

2 个答案: