2

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

最好的方法？谢谢！

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

3 回答 3

2

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()

于 2011-02-21T03:59:16.513 回答
0

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

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

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

你将会拥有：

setTimeout("toggleImages()", 1500);

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

我没有测试过这个，但试试看。希望能帮助到你！

于 2011-02-21T00:23:57.663 回答
0

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

.toggleClass("right-small left-small");
于 2011-02-20T23:39:23.287 回答