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

时间：2021-07-24 08:10:58
提供一段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这个的华东效果

9 个解决方案

#1

给单击事件做个判断， 


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

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

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

    }

} 

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

#2

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

#3

顶起。等待高手回答。

#4

测试了 点击了 没有动画出现啊。
老大什么情况啊
引用 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(……

#5

<!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>
<!--[if IE]>
<style type="text/css">.jimgMenu {position:relative;width:630px;height:200px;overflow:hidden;margin-left:20px;}</style>
<![endif]-->
<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>
是要得到这样的效果吗？

#6



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

#7

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

#8

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

引用 7 楼 zsx841021 的回复:
抱歉 代码有问题。。正在调试Ing

#9

这样修改即可： 



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

#1

给单击事件做个判断， 


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

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

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

    }

} 

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

#2

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

#3

顶起。等待高手回答。

#4

测试了 点击了 没有动画出现啊。
老大什么情况啊
引用 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(……

#5

<!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>
<!--[if IE]>
<style type="text/css">.jimgMenu {position:relative;width:630px;height:200px;overflow:hidden;margin-left:20px;}</style>
<![endif]-->
<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>
是要得到这样的效果吗？

#6



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

#7

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

#8

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

引用 7 楼 zsx841021 的回复:
抱歉 代码有问题。。正在调试Ing

#9

这样修改即可： 



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

标签：

相关文章