0

Web ページで写真/キャプションを切り替えたい。
ユーザーがクリックすると、写真が表示され、続いてキャプションが表示されます。
ユーザーがもう一度クリックすると、キャプションが消え、写真が消えます。
ユーザーがクリックすると、写真が表示され、続いてキャプションが表示されます。

3 回目のクリックで、写真がすばやく表示されます (アニメーションは表示されません)。これが私のコードです。
(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 EDIT を更新しました:
今回
はアニメーションで別の問題が発生しました。jsFiddle
は正常に動作しますが、実際の画像で使用すると、最初のサイクルの後にアニメーション化されません。

4

2 に答える 2

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 に答える
1

編集 3: 1 サイクル後に動作するように更新されたコード: 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 に答える