javascript - jQuery-在动画div中的图像源之间动态交替

我有一个菜单，该菜单具有动画性，可以通过单击箭头图像触发时在页面上滑动。菜单的动画完成后，我想将箭头切换到其他图像源，然后在菜单关闭时返回到原始文件。

最好的方法吗？
谢谢！

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');
    });
});

最佳答案

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元素。为箭头使用类和为图像使用精灵表会更好，但这仅需按照Rob的建议将$('.arrow_small').attr()部分更改为$('.arrow_small').toggleClass()调用。