关于jquery 怎样让 animate不多次执行呢

loveifa 2011-08-13 10:24:04

提供一段w3c里面的教程
http://www.w3school.com.cn/tiy/t.asp?f=jquery_animation

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
</head>

<body>

<p><a href="#" id="start">Start Animation</a></p>

<div id="box"
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>

</body>
</html>

大家可以先打开看一下，当点击Start Animation一次的时候有有一个动画出现。

当你快速点击5次的时候，这个动画就会显示5次，请问如果避免这种情况呢。

因为我要做一个类似 www.yilunet.com 首页这个滑动的效果。我的站上面当鼠标在三个图上面滑动多次后页面就不听的动，请高手指点如何才能做到类似www.yilunet.com这个的华东效果

...全文

868 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

sxldfang 2011-08-25

打赏
举报

这样修改即可：



<script type="text/javascript">  

$(document).ready(function(){

    $("#start").click(function(){

        if($("#box:animated").length==0)

        {

            $("#box").animate({height:300},"slow");

            $("#box").animate({width:300},"slow");

            $("#box").animate({height:100},"slow");

            $("#box").animate({width:100},"slow");

        }

    });

});

</script>

loveifa 2011-08-25

打赏
举报

好的麻烦老兄了贴上代码我给分

[Quote=引用 7 楼 zsx841021 的回复:]

抱歉代码有问题。。正在调试Ing
[/Quote]

三石-gary 2011-08-25

打赏
举报

抱歉代码有问题。。正在调试Ing

abcd_ufo 2011-08-25

打赏
举报

当点击一次之后改变一个变量的值如果变量的值改变了就不执行了

三石-gary 2011-08-25

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery Image Menu Example</title>
<link href="jimgMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script><script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<style type="text/css">
body {
margin:0;
padding:0;
color: #333;
font: normal 0.6em sans-serif,Arial;
background-color: #EDEDED;
background-image: url(images/bg1.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: center top;
width: 100%;
overflow: hidden;
}
</style>
<style type="text/css">
.description {padding-left: 40px;}
h1 {
padding-left: 10px;
font: normal 18px Georgia, "Times New Roman", Times, serif;
}
</style>

<script type="text/javascript">
$(document).ready(function () {

// find the elements to be eased and hook the hover event
$('div.jimgMenu ul li a').hover(function() {

// if the element is currently being animated (to a easeOut)...
if ($(this).is(':animated')) {
$(this).stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad"});
} else {
// ease in quickly
$(this).stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad"});
}
}, function () {
// on hovering out, ease the element out
if ($(this).is(':animated')) {
$(this).stop().animate({width: "78px"}, {duration: 400, easing:"easeInOutQuad"})
} else {
// ease out slowly
$(this).stop('animated:').animate({width: "78px"}, {duration: 450, easing:"easeInOutQuad"});
}
});
});
</script>
</head>
<body>
<h1>Jquery Image Menu</h1>
<div class="jimgMenu">
<ul>
<li class="landscapes"><a href="#nogo">Landscapes</a></li>
<li class="people"><a href="#nogo">People</a></li>
<li class="nature"><a href="#nogo">Nature</a></li>
<li class="abstract"><a href="#nogo">Abstract</a></li>
<li class="urban"><a href="#nogo">Urban</a></li>
</ul>
</div>
<br style="clear:both"/><br />
<div class="description">
<p>A dynamic Menu allowing you to easily navigate any content visually, with a Mootools like effect through the power of Jquery javascript.</p>
</div>
<hr style="width:92%;text-align:center;height:1px;border:1px;color:#e2e2e2;background-color:#e2e2e2;" />
</body>
</html>
是要得到这样的效果吗？

loveifa 2011-08-25

打赏
举报

测试了点击了没有动画出现啊。
老大什么情况啊[Quote=引用 2 楼 mubeibei 的回复:]

HTML code
<html>
<head>

<script type="text/javascript" src="http://www.wanmei.com/public/js/jq_132.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(……
[/Quote]

loveifa 2011-08-25

打赏
举报

顶起。等待高手回答。

PerterPon 2011-08-14

打赏
举报

给单击事件做个判断，



$("#button").click(function() {

    if(!$("#div:animate")) {

        $("#div").animate();

    }

}

#button,就是你的按钮，#div是你想让他运动的元素，：animate是jquery选择器中选择正在运动的元素，具体参加jquery api，如果#div正在执行动画的话，那就什么都不做，如果没有在执行动画的话，那就执行你指定的动画

MuBeiBei 2011-08-14

打赏
举报

<html>

<head>



<script type="text/javascript" src="http://www.wanmei.com/public/js/jq_132.js"></script>

<script type="text/javascript">  

$(document).ready(function(){

  $("#start").click(function(){

  	  $("#box").animate({height:300,queue:true},"slow");

	  $("#box").animate({width:300,queue:true},"slow");

	  $("#box").animate({height:100,queue:true},"slow");

	  $("#box").animate({width:100,queue:true},"slow");

  });

});

</script>  

</head>

 

<body>



<p><a href="#" id="start">Start Animation</a></p>



<div id="box"

style="background:#98bf21;height:100px;width:100px;position:relative">

</div>

 

</body>

</html>