jQuery对于动画和特效的处理

来源：互联网发布：美团点评算法 2017 编辑：程序博客网时间：2024/05/16 10:15

1. 显示和隐藏

显示方法 show(speed, callback); 其中speed 是定义显示的速度，可以取"fast","slow"或者是毫秒数。callback是显示完毕执行的函数名称。两参数都是可选的。

隐藏方法hide(speed,callback); 其中两个参数同上。

用法：

<span style="font-family:Microsoft YaHei;font-size:14px;"> $("#show").click(function(){    $("div").show("slow",function(){    alert("2");    });  });</span>

2. 淡入淡出效果

在jQuery中，可以实现元素的淡入淡出效果。jQuery提供了四种fade方法：fadeIn()淡入已隐藏的元素、fadeOut()用于淡出可见的元素、fadeToggle()用于在fadeIn()和fadeOut()方法之间进行切换、fadeTo()允许渐变给定的不透明度（值介于0与1之间）

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

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

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

fadeTo()的语法：$(selector).fadeTo(speed,opacity,callback);

opacity 不透明度介于 0与1之间

用法：

$("button").click(function(){    $("#div1").fadeIn("slow",function(){       $(this).text("我进来了");    })  });

3.滑动效果

滑动的方法有三种，分别是slideDown()、slideUp()、slideToggle().

slideDown()向下滑动 slideUp()向上滑动 slideToggle()在前两个方法之间进行切换。他们都可以有两个可选参数，分别为speed和callback. speed表示定义上滑或者下滑的速度，可以定义为“fast,"slow"以及毫秒数”。callback表示执行完上滑或者下滑后执行的方法。

用法：

 $("#btn").click(function(){  $("#div1").slideUp();       });

4.动画效果

对于动画效果的实现，jQuery提供了animate()方法可以使我们能够自定义动画。

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

其中：params是必需的，它里面定义了动画形成所必需的css属性，speed 与callback与之前的方法一样。

用法举例：

  $("#btn").click(function(){$("div").animate({    height:"200px",    width: "660px",},"slow",function(){    $("div").animate({        height:"80px",width: "80px"    },"slow")});    })

5.停止效果

停止效果的方法stop()，清除元素上的动画效果

九层之台，始于累土

用心点滴积累

0 0