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

Question

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

最好的方法来做到这一点？ 谢谢你！

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

Answer 1

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

Answer 2

如果我理解正确的话，您只想在菜单动画完成后更改图像。

一种方法（也许不是最好的方法）是使用 setTimeout() 在一段设定的时间后发生更改 src 属性的 JavaScript。而不是：

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

你会：

setTimeout("toggleImages()", 1500);

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

我还没有测试过这个，但试试吧。希望有帮助！

Answer 3

我建议你在 CSS 中将图像设置为类，然后执行以下操作：

.toggleClass("right-small left-small");