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

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

最好的方法吗？ 谢谢！

HTML：

 
  
 
 
 
This is content
 
  

使用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','https://stackoverflow.com/questions/5060693/jquery-dynamically-alternate-between-image-sources-within-an-animated-div/images/left_small.png'); }); }); 

Answer 1

jQuery的.animate有一个回调，当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");