jquery特效

最新推荐文章于 2024-02-14 09:08:49 发布

霸者之王

最新推荐文章于 2024-02-14 09:08:49 发布

阅读量401

点赞数

本文链接：https://blog.csdn.net/weixin_46389246/article/details/104740672

版权

jQuery简介

jQuery也就是JavaScript和查询（Query）即辅助JavaScript开发的类库。
jQuery是一个兼容多浏览器的javascript库
核心理念是 write less,do more (写得更少,做得更多)。
jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入。
曾经，jQuery是最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery
大多数 JavaScript 类库一般都具备的特性包括：
选择器（Selector）、DOM操作、实用函数、事件处理、Ajax等

jQuery的优点

轻量级、强大的选择器、出色的DOM操作、可靠的事件处理机制、完善的Ajax、出色的浏览器兼容性、便捷的链式操作、丰富的插件支持、完善的文档、学习成本低、开源等等

jQuery使用

进入jQuery官网或其他平台下载jQuery文件，并且引入页面：

下载地址：http://www.jq22.com/jquery-info122

<script src = 'jquery-1.10.1.min.js'></script>

通常每个版本号有两个版本可供下载

生产版：用于实际的网站中，已被精简和压缩
开发版：用于测试和开发，未压缩，是可读的代码
注意：2.0及之后的版本，不再兼容 IE 6 7 8

也可以引入服务器上的jQuery文件

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>

在jQuery库中，$ 就是jQuery的一个简写形式（别称）
例如： $(“#name”) === jQuery(“#name”)
当浏览器解析完DOM之后，执行ready小括号内的函数
$ (document).ready( function () { …} )
可简写为：$(function () {…} )

jq的特效函数

JQ给我们提供了非常多的特效函数，实现比较简单特效

移入，移出 hover(funcOver, funcOut);

$("#div1").hover(function(){
      $(this).css("backgroundColor", 'red');
  }, function(){
      $(this).css("backgroundColor", 'blue');
  })

显示show()，隐藏hide()
第一个参数：毫秒数，动画持续的时候
第二个参数：回调函数，动画结束的时候执行的

 $("#div1").hover(function(){
      $("#div2").hide(2000, function(){
      $("#div1").html("移入完成");
    })
 }, function(){
      $("#div2").show(2000, function(){
      $("#div1").html("移出完成");
  })
 })

透明度的淡入淡出效果
fadeIn( ) fadeOut()
第一个参数：毫秒数，动画持续的时候
第二个参数：透明度的数值只能传入0~1的小数
第三个参数：回调函数，动画结束的时候执行的

$("#div1").hover(function(){
    $("#div2").fadeOut(2000, function(){
    $("#div1").html("移入完成");
  })
 }, function(){
    $("#div2").fadeIn(2000, function(){
    $("#div1").html("移出完成");
  })
})

fadeTo ( )

$("#div1").hover(function(){
    $("#div2").fadeTo(2000, 0.5, function(){
    $("#div1").html("移入完成");
  })
 }, function(){
    $("#div2").fadeTo(2000, 1,function(){
    $("#div1").html("移出完成");
  })
})

卷闸效果
slideDown() slideUp()

$("#div1").hover(function(){
    $("#div2").slideUp(2000, function(){
    $("#div1").html("移入完成");
  })
 }, function(){
    $("#div2").slideDown(2000, function(){
    $("#div1").html("移出完成");
  })
})

animate 动画

animate({styles} , speed , easing , fn)
第一个参数：变化的css样式和目的值
第二个参数：动画持续的时间
第三个参数：运动形态支持两种运动形态

匀速(“linear”)
慢块慢（默认）(swing)

第四个参数：回调函数。

$("#div1").hover(function(){
     $("#div2").animate({
         width: 300,
         height: "300px",
         opacity: 0.5
     }, 4000, "linear",function(){
         $("#div1").html("移入完成");
     })
 }, function(){
     $("#div2").animate({
         width: 200,
         height: "200px",
         opacity: 1
     }, 4000, "swing",function(){
         $("#div1").html("移出完成");
     })
 })

链式运动:
在JQ中实现链式运动，只需要在animate方法后面通过链式操作再跟animate方法就行了。
每次调用animate的方法之前，将上一次动画stop(true)一下

 $("#div1").hover(function(){     
    $("#div2").stop(true).animate({width: 400}, 2000)
    .animate({height: 400}, 2000)
}, function(){
    $("#div2").stop(true).animate({height: 200}, 2000)
    .animate({width: 200}, 2000) 
})

delay(毫秒数) 延迟

$("#div1").click(function(){
    $("#div2").animate({width: 400}, 2000)
    .delay(4000)
    .animate({height: 400}, 2000)
    .animate({opacity: 0.5}, 2000)
})

停止动画
stop()停止当前运动的动画，但是后续动画执行不受影响
stop(true)停止所有动画，包括后续的动画

$("#div1").click(function(){
    $("#div2").animate({width: 400}, 2000)
    .delay(4000)
    .animate({height: 400}, 2000)
    .animate({opacity: 0.5}, 2000)
})


$("#div2").click(function(){
    // $("#div2").stop();   
    // $("#div2").stop(true);
    // $("#div2").stop(true, true); //停止所有动画，并且将当前的动画直接到达目的值
    $("#div2").finish();  //停止所有的动画，并且将所有动画到达目的值
})