0

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

第三次单击时，照片迅速出现（不动画）。这是我的代码。
(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工作正常，但与实际图像一起使用时，它在第一个周期后不会动画。

4

2 回答 2

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);
            });
        }
    );
});​
于 2012-09-21T16:23:00.250 回答
1

我试图坚持使用您的原始代码（我刚刚在照片的停止和动画调用之间添加了 .show() ），但我看不出有什么问题。它似乎有效，请参见此处的 jsFiddle。

更新：我根据海报的要求更改了“隐藏”功能，还更新了 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);
            });
        }
    );
});
于 2012-09-21T16:47:39.897 回答