2

矢印の画像をクリックしてトリガーすると、ページを横切ってスライドするようにアニメーション化されたメニューがあります。メニューのアニメーションが完了したら、矢印を別の画像ソースに切り替え、メニューが閉じられたら元のファイルに戻りたいと思います。

これを行う最良の方法は？ありがとうございました！

HTML:

<div id="slider">
     <div id="trigger_right">
          <img class="arrow_small" src="images/left_small.png" alt="slide menu out" />
     </div>
     <div class="trans" id="overlay"></div>
     <div id="content">
          <p>This is content</p>
     </div>
</div>

Javascript:

$(function() {
    $('#trigger_right').toggle(function (){
        $('#slider').animate({'width':'100%'}, 1500);
            $('.arrow_small').attr('src','images/right_small.png');
    }, function() {
        $('#slider').animate({'width':'30px'}, 1500);
            $('.arrow_small').attr('src','images/left_small.png');
    });
});
4

3 に答える 3

2

jQuery.animateには、アニメーションが終了したときに呼び出されるコールバックがあるため、これを使用して適切なタイミングで画像を変更できます。

$(function() {
    $('#trigger_right').toggle(function () {
        $('#slider').animate({'width':'100%'}, 1500, function() {
            $('.arrow_small').attr('src','images/right_small.png');
        });
    }, function() {
        $('#slider').animate({'width':'30px'}, 1500, function() {
            $('.arrow_small').attr('src','images/left_small.png');
        });
    });
});

上記は.arrow_small、もちろん要素が1つしかないことを前提としています。矢印にクラスを使用し、画像にスプライトシートを使用する方が良いでしょうが、Robが提案するように、$('.arrow_small').attr()パーツを呼び出しに変更するだけで済みます。$('.arrow_small').toggleClass()

于 2011-02-21T03:59:16.513 に答える
0

CSS で画像をクラスとして設定し、次のようにすることをお勧めします。

.toggleClass("right-small left-small");
于 2011-02-20T23:39:23.287 に答える
0

私の理解が正しければ、メニュー アニメーションが完了した後にのみ画像を変更する必要があります。

おそらく最善ではない方法の 1 つは、setTimeout() を使用して一定時間後に src 属性を変更する JavaScript を実行させることです。それ以外の：

$('.arrow_small').attr('src','images/right_small.png');

次のようになります。

setTimeout("toggleImages()", 1500);

function toggleImages(){
    // some code to toggle them
}

私はこれをテストしていませんが、試してみてください。それが役に立てば幸い！

于 2011-02-21T00:23:57.663 に答える