jQuery动态效果实例
Posted 帝景金岸
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery动态效果实例相关的知识，希望对你有一定的参考价值。
jQuery常见的动态效果：
隐藏/显示效果：
1.（1）：隐藏，显示：通过 jQuery，使用 hide() 和 show() 方法可以用来隐藏和显示 html 元素。
(2)：隐藏/显示的速度：
语法：
$（selector）.hide(speed, callback);
$（selector）.show(speed, callback);
speed 参数规定隐藏/显示的速度;callback 参数是隐藏或显示完成后所执行的函数名称。如：$("p").hide(1000) 隐藏内容的速 度。
2.使用 toggle() 方法可以用来切换 hide() 和 show() 方法。如：$("p").toggle()。
淡入淡出效果：
1.jQuery fadeIn() 用于淡入已隐藏的元素。
语法：$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
点击之后：
2.jQuery fadeOut() 方法用于淡出可见元素。语法如1；
3.jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。语法如1；
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
4.jQuery fadeTo() 方法允许渐变为给定的不透明度
语法：$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
滑动效果：
1.jQuery slideDown() 方法用于向下滑动元素。
语法：$("#panel").slideDown();
2.jQuery slideUp() 方法用于向上滑动元素。
语法：$("#panel").slideUp();
3.jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
语法：$(".panel").slideToggle("slow");
动画：
1.jQuery animate() 方法用于创建自定义动画。
语法：$("div").animate({left:\'250px\'});
生成动画的过程中可同时使用多个属性：
如：
$("div").animate({
left:\'250px\',
opacity:\'0.5\',
height:\'150px\',
width:\'150px\',
height:\'toggle\'
});
var div=$("div");
div.animate({height:\'300px\',opacity:\'0.4\'},"slow");
div.animate({width:\'300px\',opacity:\'0.8\'},"slow");
点击开始：
停止动画：
1.jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法：$("#panel").stop();
实现代码如下：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(); //隐藏
});
$("#show").click(function(){
$("p").show(); //显示
});
});
</script>
</head>
<body>
<p id="p1">点击隐藏就隐藏咯，点击显示就显示咯</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>
以上是关于jQuery动态效果实例的主要内容，如果未能解决你的问题，请参考以下文章