jQuery动画与切换技巧详解-优快云博客

本文深入探讨jQuery中实现元素隐藏、显示、淡入淡出、滑动等动画效果的多种方法，包括hide()、show()、toggle()、fadeIn()、fadeOut()、fadeToggle()、fadeTo()、slideDown()、slideUp()、slideToggle()等，并介绍如何通过callback参数控制动画行为，以及如何使用stop()方法停止动画。同时，展示了如何通过jQueryChaining技术将多个动作链接在一起，以提高代码效率。

隐藏，显示

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的speed参数可以取以下值：slow fast或毫秒数

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

通过jQuery，你可以使用toggle函数来实现隐藏和显示的切换

语法：

$(selector).toggle(speed,callback);

淡入淡出

jQuery fadeIn()方法

用于淡入已隐藏的方法（display:none）

语法：

$(selector).fadeIn(speed,callback);

实例

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

jQuery fadeOut() 方法

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

语法：

$(selector).fadeOut(speed,callback);

实例

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

jQuery fadeToggle() 方法

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

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法：

$(selector).fadeToggle(speed,callback);

实例

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

jQuery fadeTo()方法

jQuery fadeTo()方法允许渐变为给定的不透明度（0-1之间）

语法：

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

必须的speed参数规定效果的时长。

fadeTo()方法中必须的opacity参数将淡入淡出效果设置为给定的透明度（0-1之间）

实例

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

滑动

jQuery slideDown()

jQuery slideUp()

jQuery slideToggle()

jQuery slideDown()方法

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

语法：

$(selector).slideDown(speed,callback);

实例

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

jQuery slideUp()方法

语法：

$(selector).slideUp(speed,callback);

实例

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

jQuery slideToggle()方法

语法：

$(selector).slideToggle(speed,callback);

实例

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

jQuery 停止动画

jQuery stop()方法用于在东华或效果完成前对它们进行停止。

语法

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

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

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

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

实例

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

    $("#panel").stop();

})

jQuery Callback函数

Callback函数在当前动画100%完成后执行。

典型的语法：

$(selector).hide(speed, callback)

callback参数是在hide操作完成后被执行的函数。

错误（没有callback）

$("p").hide(1000);

alert("The paragragh is now hidden");

正确（有callback）

$("p").hide(1000,function(){

alert("The parapragh is now hidden");

})

jQuery - Chaining

通过jQuery，你可以把动作/方法链接起来。这样的话，浏览器就不必多次查找相同元素。

例子1

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

例子2

这样写会好些

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

jQuery会抛掉多余的空格，并按照一行长代码来执行代码行。