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

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

最好的方法是什么？ 谢谢大家!

HTML:

---

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

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

---

如果我理解正确，您只希望在菜单动画完成后更改图像

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

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

你应该：

setTimeout("toggleImages()", 1500);

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

---

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

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\u small

元素。为箭头使用类和为图像使用精灵表会更好，但这只需要将

$（'.arrow_small'）.attr（）

部分更改为

$（'.arrow_small'）。toggleClass（）

调用，如Rob所建议

setTimeout("toggleImages()", 1500);

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

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