日期:2014-05-16 浏览次数:20408 次
$(document).ready(function() {
$(".aa").hover(
function() {
picTimer = setInterval(function()
{showPic();},500); //此3000代表自动播放的间隔,单位:毫秒
}
,function(){
clearInterval(picTimer);
}
).trigger("mouseleave");
function showPic() {
$(".div1").animate({"left":"300"},500);
}
});
.divaa{ width:300px; height:250px; background:#FFCC99}
.div1{ position:absolute; top:0px; left:400px;}
<a href="#" class="aa">click me</a> <div class="div1 divaa">1</div>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
div {
width:40px; height:40px; border:1px solid red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="a"></div>
<button id="btn">动画/停止</button>
<script>
var timer;
var a = $('#a');
$('#btn').click(function(){
if(timer){
clearInterval(timer);
timer = null;
return;
}
clearInterval(timer);
timer = setInterval(function(){
a.animate({
marginLeft: parseInt(a.css('marginLeft')) + 11
})
}, 500)
})
</script>
</body>
</html>