jQuery-在动画div中的图像源之间动态交替 [英] jQuery- dynamically alternate between image sources within an animated div

问题描述

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

I have a menu that is animated to slide across the page when triggered by clicking on an image of an arrow. I'd like to switch the arrow to a different image source once the menu's animation has completed, and then return back to the original file when the menu has been closed.

最好的方法吗？
谢谢！

Best way to do this? Thank you!

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：

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 有一个回调，当动画完成后调用，所以你可以在适当的时候用它来改变图像：

jQuery's .animate has a callback that is called when the animate is finished so you can use that to change the images at the appropriate time:

$(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建议。

The above assumes that you only have one .arrow_small element of course. Using a class for the arrow and a sprite sheet for the images would be better but that would only require changing the $('.arrow_small').attr() parts to $('.arrow_small').toggleClass() calls as Rob suggests.

这篇关于jQuery-在动画div中的图像源之间动态交替的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！