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

【问题标题】：jQuery- dynamically alternate between image sources within an animated divjQuery - 在动画 div 中的图像源之间动态交替
【发布时间】：2011-02-20 22:57:45
【问题描述】：

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

最好的方法？谢谢！

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

【问题讨论】：

标签： javascript jquery image src

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

【讨论】：

【解决方案2】：

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

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

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

你会：

setTimeout("toggleImages()", 1500);

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

我还没有测试过这个，但试一试。希望对您有所帮助！

【讨论】：

【解决方案3】：

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

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

【讨论】：