jQuery中事件与动画的总结分享(2)

$(function () { $("#btnshow").click(function () { $("img").show(1000); }); $("#btnhide").click(function () { $("img").hide(1000); }); }); $(function () { $("#btnin").click(function () { $("img").fadeIn(5000); }); $("#btnout").click(function () { $("img").fadeOut(5000); }); }); $(function () { $("#btnup").click(function () { $("img").slideUp(5000); }); $("#btndown").click(function () { $("img").slideDown(5000); }); });

 4.animate()方法是用来自定义动画的

当我们需要对动画有更多的控制时,使用animate()方法能够更具有灵活性,因为它可以替换其他所有的方法

$(function () { $("[type=button]").bind("click", function () { //两个特效并行执行，不加入队列： $("div"). animate({ "font-size": "50px" }, 3000) .animate({ "width": "300px" }, { queue: false, duration: 3000 }); }); });

4.1 animate()方法替换一些其他的方法

//替换show()方法 //$("img").show(1000); $("img").animate({height:"show",width:"show",opacity:"show"},1000); //替换fadeIn()方法 $("img").fadeIn(5000); $("img").animate({opacity:"show"},5000); //替换slideDown()方法 $("img").slideDown(5000); $("img").animate({ height: "show" }, 5000);

这些动画就是animate()方法的一种内置了特定样式的简写形式,这些特定的样式值可以为"show"、"hide"、"toggle",也可以自定义数值

$("div").click(function() { $(this).next().toggle(); $(this).next().fadeTo(600,0.2); $(this).next().fadeToggle(); $(this).next().slideToggle(); }); 

以上这篇jQuery中事件与动画的总结分享就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章: