JQuery中解决重复动画的方法

下面我们就来总结一下几个JQuery中解决重复动画的办法 ，这里有几个常见的动画效果，它们分别是：图片滚动轮播，回到页面顶部，联级菜单滑出，手风琴。

图片滚动：

$("#banner-min-img1").mouseover(function (){
$("#banner-img").animate({left:"0px"},300)}
$("#banner-min-img2").mouseover(function (){
 $("#banner-img").animate({left:"-1041px"},300)}
$("#banner-min-img3").mouseover(function (){
$("#banner-img").animate({left:"-1990px"},300)}

回到页面顶部：

$("#goBackTop").click(function (){
$("html,body").animate({scrollTop:0},1000)}

在实际操作中我们会发现，代码是非常简单的，就那么2、3行，但是其中的队列控制也让人不忍直视：

回到页面顶部，如果你连续点击回到页面顶部多次，那么短时间内你就再也没办法用滚动条了；

滚动轮播，你指向100次，他就会滚100次才停止！完全不顾及你的感受！

那么如何来解决呢？其实jquery内置了2种方法，一种是stop，一种是在对象后面加上is（：animated），推荐使用后面一种，用上之后，腰也不酸了，动画也听话了；代码

回到顶部，代码如下：

$("#goBackTop").click(function (){
  if(!$("html,body").is(":animated"))
     {$("html,body").animate({scrollTop:0},1000)}
})

最后奉上 最简洁的 手风琴代码，只有2行：

CSS：

  <meta charset="utf-8">
  <style>
    .wrap{
      width: 400px;
      min-height: 550px!important;
      background: #000;
      display: block!important;
    }
    div{
      width: 400px;
      height: 200px;
      background: #faf8ff;
      display: none;
      overflow: hidden;
    }
    p{
      width: 400px;
      height: 50px;
      line-height:50px;
      background: #62f1f4;
      cursor: pointer;
      border-bottom: 1px solid #eee;
      color: #777;
      font-size: 1.3em;
      font-style: italic;
      margin: 0;
      padding: 0;
    }
    .dis{
      display: block;
    }
  </style>

HTML：

<body>
<div class="wrap">
<p>Acc</p>
<div class="dis">大</div>
<p>click me</p>
<div>王</div>
<p>click me</p>
<div>派</div>
<p>click me</p>
<div>我</div>
<p>click me</p>
<div>来</div>
<p>click me</p>
<div>巡</div>
<p>click me</p>
<div>山</div>
</div>
</body>

jquery！

<script src="jquery1.9.1.js"></script>
<script>
  $("p").mousedown(function(){
    $(this).next("div").slideToggle();
    $(this).next("div").siblings("div").slideUp();
  });
</script>

希望本文所述对你有所帮助，JQuery中解决重复动画的办法内容就给大家介绍到这里了。希望大家继续关注我们的网站!想要学习JQuery可以继续关注本站。

赞 (0)

相关推荐

  • 从零开始学习jQuery (七) jQuery动画实现 让页面动起来

    从零开始学习jQuery (七) jQuery动画实现 让页面动起来

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 开发人员一直痛疼做动画. 但是有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手! 本文将介绍jQuery的动画相关函数.原来做动画如此简单! 二.前言 本系列文章的实例都是针对某一个技术细节的, 因为我们要学习的是基础知识, 虽然总有人希望要复杂一些的应用示例, 但是我想还是让我们先把基础打牢,  有了扎实的基础凭借每

  • jQuery实现加入购物车飞入动画效果

    jQuery实现加入购物车飞入动画效果

    HTML 首先载入jQuery库文件和jquery.fly.min.js插件. 复制代码 代码如下: <script src="jquery.js"></script> <script src="jquery.fly.min.js"></script> 接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片.价格.名称以及加入购物车按钮等信息. 复制代码 代码如下: <

  • jQuery动画与特效详解

    1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏. 复制代码 代码如下: <script type="text/javascript">             $(function() {                 $("input:first").click(function() {                     $("p").hide();

  • jQuery下的动画处理总结

    queue()/ dequeue()这两个方法就像Ajax的XMLHttpRequest对象一样的隐蔽,不为常人所知.这两个方法在动画处理的时候很有用,我们经常会写一些这样的代码 复制代码 代码如下: $('#test').animate({            "width": "300px",            "height": "300px",            "opacity":&qu

  • 分享8款优秀的 jQuery 加载动画和进度条插件

    分享8款优秀的 jQuery 加载动画和进度条插件

    加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式.今天这篇文章向大家推荐10款基于 jQuery 实现的加载动画和进度条插件. Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示 Percentage Loader 一款轻量的 jQue

  • 基于JQuery的数字改变的动画效果--可用来做计数器

    因为要求是动态的,我就想到了应该是位置的变化,想到之前用过的JQuery,把里边的效果全试了试,最后选用了animate自定义,代码如下: 复制代码 代码如下: <html> <head> <title>testAnimate</title> <script type="text/javascript"> function changeNum(n) { //n设为想要改成的数字 $(function () { $("

  • JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)

    首先给这些'返回页首'的链接加上个Class: <a href="#" class="backtotop" target="_self">返回页首↑</a> <!--把所有返回页首的链接加上class,例如:backtotop-->然后加入下面jQuery代码,你可以把这行代码放在</body>前,或者其它位置.当然你还要在<head>里包含jQuery库文件.( 复制代码 代码如下:

  • jQuery Animation实现CSS3动画示例介绍

    jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red").详细用法请参考jQuery 效果 - animate()方法和官方教程. 像CSS3好多效果因为不是数值的,所以是没有办法直接通过animate()方法实现的.如translate(), ro

  • jquery Ajax 实现加载数据前动画效果的示例代码

    复制代码 代码如下: $(document).ready(function(){     $.ajax({        type:"get",        cache:false,        url:"ajaxpage.aspx?t=getcity",        dataType:"json",        beforeSend:function(){           $("#vvv").append('&l

  • JQuery动画和停止动画实例代码

    JQuery动画和停止动画实例代码

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

随机推荐