jQuery-动画

Posted 2020-09-16

• .hide() 动态隐藏

当提供hide方法一个参数时，.hide()就会成为一个动画方法。.hide()方法将会匹配元素的宽度，高度，以及不透明度，同时进行动画操作

 ‘fast‘ 和 ‘slow‘ 分别代表200和600毫秒的延时，默认使用400 毫秒的延时。

//.hide("fast / slow")

$elem.hide(option)
$("#a2").hide({
　　duration: 10000,
　　complete: function() {
                    alert(‘执行3000ms动画完毕‘)

                }
            })

• show() 动态显示 匹配元素的宽度，高度，以及不透明度，同时进行动画操作

//先隐藏再显示
$(‘elem‘).hide(3000).show(3000)

 

• toggle() 切换显示或隐藏元素, toggle方法就是show与hide的相互切换的一个快捷方法

如果不带参数，则没有动画

提供参数：.toggle( [duration ] [, complete ] )

• .slideDown()：用滑动动画显示一个匹配元素, 匹配高度，下拉动画是从无到有，所以一开始元素是需要先隐藏起来的，可以设置display:none

.slideDown( [duration ] [, complete ] )

•  slideUp() 向上隐藏

.slideUp( [duration ] [, easing ] [, complete ] )

easing 规定在动画的不同点上元素的速度。默认值为 "swing"。

可能的值： 

"swing" - 在开头/结尾移动慢，在中间移动快

"linear" - 匀速移动 

•  slideToggle() 上下拉切换

.slideToggle( [duration ] ,[ complete ] )

• fadeOut() 淡出动画，元素是隐藏状态不对作任何改变，元素是可见的，则将其隐藏。所谓不改变宽高是指，在动画执行的过程中   元素的宽高是不变的   只是透明度改变，但是在动画结束后   元素的display会变成none

.fadeOut( [duration ], [ complete ] )

•  fadeIn() 淡入动画

.fadeIn( [duration ], [ complete ] )
$("p").fadeIn(1000, "linear"); //linear 淡入速度线性的

• fadeToggle() 淡入淡出切换

.fadeToggle( [duration ] ,[ complete ] )

•  fadeTo() 淡入效果，透明度到一个值，透明度不是完全0或者1

.fadeTo( duration, opacity ,callback)

• animate()

.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )

options参数

• • duration - 设置动画执行的时间
  • easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
  • step：规定每个动画的每一步完成之后要执行的函数
  • progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
  • complete：动画完成回调，如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次

所有用于动画的属性必须是数字的，除了定义数值，每个属性能使用‘show‘, ‘hide‘, 和 ‘toggle‘。
CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。

.animate({
    left: 50, 
    width: ‘50px‘   
    opacity: ‘show‘,  
    fontSize: "10em",
}, 500);

$(‘#elem‘).animate({
    width: ‘toggle‘,  
    height: ‘toggle‘
  }, {
    duration: 5000,
    specialEasing: {
      width: ‘linear‘,
      height: ‘easeOutBounce‘
    },
//now:是当前动画正在改变的属性的实时值；step： fx返回的是和css相关的属性；step 函数只能返回我们在代码中设置的最后一条CSS属性值 

　　step: function(now, fx) {
　　$aaron.text(‘高度的改变值:‘+now)
　　},

//arguments中数组值代表函数第几个参数。这里arguments[1]代表第二个参数，则是代表fx, progress： fx返回的是动画进度本身的属性； 

　　progress: function(now, fx) {
　　$aaron.text(‘进度:‘+arguments[1])

}

    complete: function() {
      $(this).after(‘<div>Animation complete.</div>‘);
    }
  });

　　

•  stop() 暂停动画

 

.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )

 

• • .stop(); 停止当前动画，点击在暂停处继续开始
  • .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
  • .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值

如果有多个动画同时进行，例如：

$("#exec").click(function(){
        
        $("#aaron").animate({
            width: 300 
        }, 3000)
        $("#aaron").animate({
            height: 300
        }, 1000)
        $("#aaron").animate({
            opacity: 0.2
        }, 1000) 
    })   
   

    $("#stop").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        if (v == "1") {
            //当前当前动画
            $aaron.stop()
        } else if (v == "2") {
            //停止所以队列
            $aaron.stop(true)
        } else if (v == "3") {
            //停止动画，直接跳到当前动画的结束
            $aaron.stop(true,true)
        } 
    }); 

 

stop()：只会停止第一个动画，第二个第三个继续

stop(true)：停止第一个，第二个和第三个动画不执行

stop(true ture)：停止当前动画，直接跳到第一个动画的最终状态，不执行之后的动画 

• jQuery的大部分方法都是针元素合集的操作，所以jQuery会提供$(selector).each()来遍历jQuery对象
• empty() 方法是除所有文本和子节点
• each() 遍历

jQuery.each(array, callback )
jQuery.each( object, callback )
回调函数中传入的两个参数，如果遍历的是数组，第一个参数是索引值，第二个参数是数组的值；如果遍历是对象，第一个参数是属性，第二个参数是属性值。

//第一个参数传递的就是一个对象或者数组，第二个是回调函数

$.each(["Aaron", "慕课网"], function(index, value) {
   //index是索引,也就是数组的索引
   //value就是数组中的值了
});
// 遍历对象属性
$.each({
　　name: "张三",
　　age: 18
　　}, function(property, value) {
　　　　$aaron.append("属性名=" + property + "; 属性值=" + value);
});

 

　　如果返回值为false，则停止循环(相当于普通循环中的break)；如果返回其他任何值，均表示继续执行下一个循环。

在jQuery库中，$只不过是jQuery的简写！所以$.each==jQuery.each是等价的！ 

•  jQuery.inArray()函数用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。

jQuery.inArray( value, array ,[ fromIndex ] )
传递一个检测的目标值，然后传递原始的数组，可以通过fromIndex规定查找的起始值，默认数组是0开始

• jQuery.trim()函数用于去除字符串两端的空白字符

$.trim($("#results2").val())

• 移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab）

如果这些空白字符在字符串中间时，它们将被保留，不会被移除

•  .get( [index ] )   例如$(‘a‘).get(1)， get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1

• .index()方法，从匹配的元素中搜索给定元素的索引值，从0开始计数。

.index()
.index( selector )
.index( element )

如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置

如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置

如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1