我会简短地说。
我找到了一段代码，并对它进行了相当多的修改，它似乎可以工作。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('dota').click(function(){
});
$('#Homebutton').toggle(function(){
$('.animateme').html('<img src="Construct2/Images/Gnoll_Running.gif" />');
$('.animateme').animate({
left: '+=150',
}, 800, function() {
$('.animateme').html('<img src="Construct2/Images/Gnoll_Hit.gif" />');
});
$('.animateme').animate({
left: '+=0',
}, 500);
$('#Homebutton').html('<img src="Construct2/Images/buttonred.png" />');
$('.animateme').animate({
left: '+=0',
}, 500, function() {
$('.animateme') .html('<img src="Construct2/Images/Gnoll_Resting_smaller.gif" />');
});
}, function(){
$('.animateme').html('<img src="Construct2/Images/Gnoll_Running_left.gif" />');
$('.animateme').animate({
left: '-=500',
}, 2200, function() {
$('.animateme').html('<img src="Construct2/Images/Gnoll_Resting_smaller.gif" />');
});
});
$('#AddOnbutton').toggle(function(){
$('.animateme').html('<img src="Construct2/Images/Gnoll_Running.gif" />');
$('.animateme').animate({
left: '+=250',
}, 1000, function() {
$('.animateme').html('<img src="Construct2/Images/Gnoll_Hit.gif" />')
});
$('.animateme').animate({
left: '+=0',
}, 1000, function() {
$('.animateme') .html('<img src="Construct2/Images/Gnoll_Resting_smaller.gif" />');
});
}, function(){
$('.animateme').html('<img src="Construct2/Images/Gnoll_Running_left.gif" />');
$('.animateme').animate({
left: '-=500',
}, 2200, function() {
$('.animateme').html('<img src="Construct2/Images/Gnoll_Resting_smaller.gif" />');
});
});
});
</script>
问题是我希望 "#Homebutton" 在 Gnoll_Hit 动画进行到一半时变为红色。所以我拼接了Hit动画，但没有成功。
我想我必须使用回调来做到这一点，因为最后一个动画完成后我希望它转到按钮链接。
最佳答案
是的，在动画完成后调用它，因此在第二个参数上添加一个函数并在那里执行下一组动画。
还有一些提示:您应该尝试使用jquery chaining
$('.animateme')
.html('')
.animate( blah blah );
因此代码更容易阅读并且速度更快。
那么你也可以在 animate 函数中使用 $(this)
.animate( blah blah , function (){
$(this).animate('');
});
祝你编码愉快:)
关于jQuery 动画回调，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11335287/