jQuery 动画

简介:

jQuery动画相关方法概况

方法 说明 实例
hide()和show() 隐藏和显示 HTML 元素。 ("#hide").click(function(){ 
                     $("p").hide(); 
                 });
("#hide").click(function(){                      $("p").hide();                  });
("#show").click(function(){
        $("p").show();
    });
toggle() 可以使用 toggle() 方法来切换 hide() 和   show() 方法。 ("button").click(function(){("button").click(function(){("p").toggle();
    });
fadeIn()和fadeOut() 淡入和淡出可见元素。 ("button").click(function(){("button").click(function(){("#div").fadeOut(3000);
         $("#div").fadeIn(3000);
    });
fadeToggle() 可以使用fadeToggle()方法来切换fadeIn() 与   fadeOut() 方法。 ("button").click(function(){("button").click(function(){("#div1").fadeToggle();
         ("#div2").fadeToggle("slow");("#div2").fadeToggle("slow");("#div3").fadeToggle(3000);
    });
fadeTo()  fadeTo()方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。 ("button").click(function(){("button").click(function(){("#div1").fadeTo("slow",0.15);
    });
slideUp()和slideDown() 向上和向下滑动元素。 ("#flip").click(function(){("#flip").click(function(){("#panel").slideUp(1000);
          $("#panel").slideDown(1000);
    });
slideToggle() 可以使用 slideToggle() 方法来切换   slideUp() 与 slideDown() 方法。 ("#flip").click(function(){("#flip").click(function(){("#pane").slideToggle();
    });
animate() animate() 方法允许您创建自定义的动画。 ("button").click(function(){("button").click(function(){("div").animate({
         left:'250px',
         opacity:'0.5',
         height:'+=150px',
         width:'-=150px'
       });
    });
stop() stop() 方法用于在动画或效果完成前对它们进行停止。 ("#stop").click(function(){("#stop").click(function(){("#panel").stop();
    });


 

 

显示/隐藏

(1)hide() 和 show()

在 jQuery 中,可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。

语法

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

注意:以下的speed和callback参数说明对于本文介绍的其他方法均适用。所以下文不再赘述。

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 、"normal"或毫秒数。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

范例代码

如下代码的作用是:点击按钮后,触发<p>元素的隐藏动作,速度为1000毫秒,动作结束后,弹出“已经隐藏”提示。

$("button").click(function(){
$("p").hide(1000, function(){
alert("已经隐藏");
});
});

(2)toggle()
在jQuery中,可以使用 toggle() 方法来切换 hide() 和 show() 方法。

语法

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

参数说明可以参考 hide() 和 show()。

 

 

 

淡入 / 淡出

(1)fadeIn() 和 fadeOut()

在 jQuery 中,可以使用 fadeIn() 和 fadeOut() 方法来淡入和淡出 HTML 元素。

语法

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

参数说明可以参考 hide() 和 show()。

 

(2)fadeToggle()

在jQuery中,可以使用fadeToggle()方法来切换fadeIn() 与 fadeOut() 方法。

语法

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

参数说明可以参考 hide() 和 show()。

 

(3)fadeTo()

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

语法

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

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

其余参数说明可以参考 hide() 和 show()。


 

 

滑动

(1)slideUp() 和 slideDown()

在 jQuery 中,可以使用 slideUp() 和 slideDown() 方法来向上滑动、向下滑动元素。

语法

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

参数说明可以参考 hide() 和 show()。

 

(2)slideToggle()

在 jQuery 中,可以使用 slideToggle() 方法来切换 slideUp() 与 slideDown() 方法。

语法

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

参数说明可以参考 hide() 和 show()。


 


动画

animate()

在jQuery中,animate() 方法允许创建自定义的动画。

语法

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

必需的 params 参数定义形成动画的 CSS 属性。

其余参数说明可以参考 hide() 和 show()。

范例代码

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


 

 

停止动画

stop()

在jQuery中,stop() 方法用于在动画或效果完成前对它们进行停止。

语法

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

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

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

 


本文转自静默虚空博客园博客,原文链接:http://www.cnblogs.com/jingmoxukong/p/4178044.html,如需转载请自行联系原作者

相关文章
N..
|
5月前
|
JavaScript 前端开发 UED
jQuery动画特效
jQuery动画特效
N..
57 1
|
5月前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
|
5月前
|
机器学习/深度学习 JavaScript
|
4月前
|
移动开发 JavaScript 前端开发
老程序员分享:jQuery笔记(四)jQuery中的动画
老程序员分享:jQuery笔记(四)jQuery中的动画
43 0
|
22天前
|
JavaScript
jQuery 停止动画
jQuery 停止动画
14 4
|
23天前
|
缓存 JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
17 4
|
1月前
|
JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
35 11
|
1月前
|
JavaScript
jQuery 停止动画
jQuery 停止动画
24 11
|
2月前
|
JavaScript 前端开发
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
如何在Vue 2或Vue 3项目中引入jQuery及其动画扩展库jQuery.easing,以实现更丰富的动画效果。
118 0
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
|
5月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
97 1