jQuery基础教程学习笔记（六）动画特效

jQuery
419
0
0
2022-06-29
一个jQuery版响应式匹配高度的库：matchHeight
上一篇
ajax在jQuery如何操作解析
下一篇
标签   jQuery基础

本节主要讲的是隐藏与显示（hide，show，toggle）、上卷下拉（sildeDown，slideUp，slideToggle）、淡入淡出（fadeOut,fadein,fadeToggle,fadeTo）、自定义动画 （animate，stop）以及其他核心方法的使用！

jQuery基础教程学习笔记（六）动画特效

（1）jquery的隐藏和显示动画

jQuery中隐藏元素的hide方法

$elem.hide() 用来隐藏元素

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

语法：$(selector).hide(speed,callback)

例：$("button:last").click(function() {

$("#a2").hide({
    duration: 3000,
    complete: function() {
        alert('执行3000ms动画完毕')
    }
});

或者： 

$("#btn").click(function() {
    $("#right").hide(3000,function(){
        alert('执行3000ms动画完毕')
    })
})

jQuery中显示元素的show方法

语法：$(selector).show(speed,callback)用法和hide一致！

例：

$("button").click(function() {
    $("#a1").hide(3000).show(3000)
});

注意：

（1）show与hide方法是修改的display属性，通过visibility属性修改需要通过css方法单独设置

（2）如果样式中使用!important，比如display: none !important，想让.show()方法正常工作，必须使用.css('display', 'block !important')重写样式

（3）如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度

jQuery中显示与隐藏切换toggle方法

基本的操作：toggle(); 元素的显示与隐藏（display属性）

用法：$(selector).toggle(speed,callback,switch)

也可以直接定位：.toggle(true|false),指定元素的最终效果

例：

$("button:first").click(function() {
    $(".left").toggle(3000)
});

（2）上卷下拉效果

jQuery中下拉动画slideDown

slideDown() 方法用于向下滑动元素。

用法：$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

例：

$("button:first").click(function() {
    $("#a1").slideDown(3000)
});

jQuery中上卷动画slideUp

slideUp() 方法用于向上滑动元素。

语法：$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

例： 

$("button:last").click(function() {
    $("#a2").slideUp(3000,function(){
        alert('动画执行结束')
    })
});

jQuery中上卷下拉切换slideToggle

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

用法：$(selector).slideToggle(speed,callback);

例：

$("#flip").click(function(){
    $("#panel").slideToggle();
});

（3）淡入淡出效果

jQuery中淡出动画fadeOut

fadeOut()方法用于淡出可见元素。

用法：$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

例：

$("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});

jQuery中淡入动画fadeIn

fadeIn() 用于淡入已隐藏的元素。

用法：$(selector).fadeIn(speed,callback);

例：

$("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

jQuery中淡入淡出切换fadeToggle

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

用法：$(selector).fadeToggle(speed,callback);

例：

$("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
});

淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性，但是他们都有个共同的特点，变化的区间要么是0，要么是1，当opacity的值为0时，即隐藏该元素设置为display：none;

jQuery中淡入效果fadeTo

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

例：

$("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
});

jQuery中toggle与slideToggle以及fadeToggle的比较

（1）toggle：切换显示与隐藏效果

（2）sildeToggle：切换上下拉卷滚效果

（3）fadeToggle：切换淡入淡出效果

toggle与slideToggle细节区别：

（1）toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性

（2）slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

fadeToggle方法

（1）fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。

（2）元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。

（3）元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。

注释：隐藏的元素不会被完全显示（不再影响页面的布局）

（4）自定义动画

jQuery中动画animate

animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性，json写法

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

例：

$("button").click(function(){
    $("div").animate({
        left:'250px',
        opacity:'0.5',
        height:'150px',
        width:'150px'
    });
});

当使用 animate()时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

animate() - 使用相对值，可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

$("button").click(function(){
    $("div").animate({
        left:'250px',
        height:'+=150px',
        width:'+=150px'
    });
});

animate() - 使用预定义的值，可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

$("button").click(function(){
    $("div").animate({
        height:'toggle'
    });
});

animate() - 使用队列功能 果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

$("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
});

（5）jQuery其他核心方法

jQuery中停止动画stop

stop() 方法用于停止动画或效果，在它们完成之前。stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

（1）.stop(); 停止当前动画，点击在暂停处继续开始

（2）.stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果goToEnd参数提供true值,那么在队列中的动画其余被删除并永远不会运行

（3）.stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值

例：

$("#aaron").animate({
    height: 300
}, 5000)
$("#aaron").animate({
    width: 300
}, 5000)
$("#aaron").animate({
    opacity: 0.6
}, 2000)

分析：（1）stop()：只会停止第一个动画，第二个第三个继续

（2）stop(true)：停止第一个、第二个和第三个动画

（3）stop(true ture)：停止动画，直接跳到第一个动画的最终状态

jQuery其他核心知识

each() 方法规定为每个匹配元素规定运行的函数。

语法：$(selector).each(function(index,element))

必需。为每个匹配元素规定运行的函数。index - 选择器的 index 位置element - 当前的元素（也可使用 "this" 选择器）

例： $.each(['属性1', '属性2'], function(i, item) {

$aaron.append("索引=" + i + "; 元素=" + item);

});//结果索引=0; 元素=属性 索引=1; 元素=属性2

jQuery中查找数组中的索引inArray

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

语法：jQuery.inArray( value, array ,[ fromIndex ] )

fromIndex规定查找的起始值，默认数组是0开始

例：$.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引：4

注意：如果要判断数组中是否存在指定值，你需要通过该函数的返回值不等于(或大于)-1来进行判断

例：var index = $.inArray('a',['a','b','c','d','a','c'],2);

$aaron.text('a的索引是: '+ index)

} //返回4

jQuery中去空格trim方法

jQuery.trim()函数用于去除字符串两端的空白字符，也可以写作$.trim()

例：$("#exec2").click(function() {

alert("值的长度：" + $.trim($("#results2").val()).length)

});

jQuery中DOM元素的获取get方法

如果需要单独操作合集中的的某一个元素，可以通过.get()方法获取到

语法：.get( [index ] )

(1)get方法是获取的dom对象，也就是通过document.getElementById获取的对象

(2)get方法是从0开始索引查找第二个元素可以写作： $(a).get(1)

负索引值参数表示从后往前索引，起始值是-1 例： $(a).get(-2)

eq() 返回的是jquery对象，get()返回的是dom元素，所以$(a).get(1)无法直接通过jquery方法操作，需要通过$($(a).get(1)).css()改变,而$(a).get(1)需要通过$(a).get(1).style.的方式

jQuery中DOM元素的获取index方法

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

语法：.index()

.index( selector )

.index( element )

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

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

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

有点晕吧，看例子：

<ul>

<a></a>

<li id="test1">1</li>

<li id="test2">2</li>

<li id="test3">3</li>

</ul>

$("li").index() 没有传递参数，反正的结果是1，它的意思是返回同辈的排列循序，第一个li之前有a元素,同辈元素是a开始为0，所以li的开始索引是1

如果要快速找到第二个li在列表中的索引,可以通过如下2种方式处理：

$("li").index(document.getElementById("test2")) //结果：1

$("li").index($("#test2")) //结果:1

学完这些，基本的教程都已经学完，你就可以尝试写一下一些特效了，或者去看一下你之前看不懂的那些jquery特效，你会发现其实好简单！

jQuery基础教程学习笔记（六）动画特效

jQuery基础教程学习笔记（六）动画特效

一个jQuery版响应式匹配高度的库：matchHeight
上一篇
ajax在jQuery如何操作解析
下一篇