Jquery - 使用计时器继续动画 - 不清楚动画是如何工作的
Posted
技术标签:
【中文标题】Jquery - 使用计时器继续动画 - 不清楚动画是如何工作的【英文标题】：Jquery - continuing an animation with a timer - unclear about how animation works 【发布时间】：2012-03-02 01:16:59 【问题描述】：这是我的鼠标悬停代码：
$('.caption').mouseover(function()
$(this).fadeTo('slow',1);
$(this).css('color','#ddd').animate('color': 'white', 500);
$(this).css('font-weight','bold');
);
$('.caption').mouseleave(function()
$(this).fadeTo('slow',0.9);
$(this).css('color','white').animate('color': '#ddd', 500);
$(this).css('font-weight','normal');
);
我有四个可以使用的框，都带有 .caption 类。我想让这些动作在它们四个之间旋转，并在移动到下一个之前暂停一定的秒数（比如 5 秒）。换句话说，mousedown 效果（没有 mousedown），等待 5 秒，mouseup 效果，然后移动到第二个 .caption，然后做同样的事情......等等。
这是我所在的位置，大约 45 分钟后。
function doRotate(num)
var len = 3; // starts at 0
var index = num;
$('div .nav-piece').each = function()
setInterval(function()
$('div .nav-piece').eq(index).animate(
backgroundColor: "white"
, 500);
, 500);
setInterval(function()
$('div .nav-piece').eq(index).animate(
backgroundColor: "#cfc4c3"
, 500);
, 500);
这里是html：
<div id="nav-container">
<div id="piece1" class="nav-piece">
<div style="background-image: url('assets/bg_example.jpg'); background-repeat: no-repeat;">
<div class="caption overlay-top">Text example</div>
</div>
</div>
<div id="piece2" class="nav-piece">
<div style="background-image: url('assets/bg_example.jpg'); background-repeat: no-repeat;">
<div class="caption overlay-bottom">Text example</div>
</div>
</div>
<div id="piece3" class="nav-piece">
<div style="background-image: url('assets/bg_example.jpg'); background-repeat: no-repeat;">
<div class="caption overlay-top">Text example</div>
</div>
</div>
<div id="piece4" class="nav-piece">
<div style="background-image: url('assets/bg_example.jpg'); background-repeat: no-repeat;">
<div class="caption overlay-bottom">Text example</div>
</div>
</div>
</div>
doReady 在 document.ready 中被调用。
谢谢！
【问题讨论】：
你能发布你正在使用的 HTML 吗？什么叫 doRotate？ @j08691 刚刚编辑了。谢谢！ 【参考方案1】：首先，您应该结合使用 mouseenter/mouseleave 或 mouseover/mouseout，而不是混合使用这两种行为
这将实现您想要的。每个字幕都在先前动画的回调中执行。我们使用 queue 将元素放入 fx 队列（唯一的地方 delay() 起作用）。
我会把它扔在小提琴上，但小提琴今天似乎处于只读模式！ :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test url stuff</title>
<style type="text/css">
.caption width: 50px; height: 50px; margin: 20px; padding: 5px; float: left;
.red background-color: red;
.blue background-color: blue;
.yellow background-color: yellow;
.green background-color: green;
.black background-color: black;
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery(function($)
var
// how long should it animate?
howLong = 1000,
// apply the font-weight when animation completes
mouseInProps = duration: 500, complete: function() $(this).css('font-weight','bold'); ,
mouseOutProps = duration: 500,
complete: function()
var $this = $(this);
// apply the font-weight when animation completes
$this.css('font-weight','normal');
if( $this.next().length )
// this makes them successively call the next element and animate it
// by using the complete: callback on animate's props
queueOne($this.next());
;
function queueOne($e)
$e.queue(function()
$(this).fadeTo('slow', 1).animate('color': '#fff', mouseInProps).dequeue();
)
// make the queue pause x seconds
.delay(howLong)
// apply the mouseleave effects
.queue(function()
$(this).fadeTo('slow', .9).animate('color': '#ddd', mouseOutProps).dequeue();
);
queueOne($('.caption').first());
);
</script>
<div class="caption red">one</div>
<div class="caption green">two</div>
<div class="caption blue">three</div>
<div class="caption yellow">four</div>
<div class="caption black">five</div>
</body>
</html>
【讨论】：
哦，看起来项目被添加到不同的队列中。 1.7 中有一个选项可以将它们放到同一个队列中，这比回调更优雅一些；你在> = 1.7吗？不管怎样，我都会纠正我的例子。 好的，什么版本的 jQuery UI？ （这是为背景颜色设置动画所必需的） 嗯，由于某种原因，它现在只为第一个动画。奇怪的是它对你有用......我会试着从这里拿走它，除非你知道一个快速修复。我欠你一杯咖啡，只是我不能通过互联网管道。 :) 嗯，这很奇怪。好吧，让我知道你发现了什么！ 我发现它在 IE 中产生了内存错误。我可以纠正它的唯一方法是升级到 jQuery 1.5.1 或更高版本；您应该使用示例尝试一下，看看它是否也解决了您的问题。以上是关于Jquery - 使用计时器继续动画 - 不清楚动画是如何工作的的主要内容，如果未能解决你的问题，请参考以下文章