jQuery动画效果

来源：互联网发布：淘宝的网商银行贷款吗编辑：程序博客网时间：2024/05/29 19:45

工作中遇到了jQuery，之前没接触过，今天看到一篇博客，特此分享一下。

1、show()与hide()
show()和hide()方法用于显示或隐藏页面中的元素，它的调用格式分别为：
$(selector).hide(speed,[callback])和$(selector).show(speed,[callback])
参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名。

<body>
<h3>show()和hide()方法动画方式显示和隐藏元素</h3>
<div>
<h4>我喜欢吃的水果</h4>
<ul>
<li>苹果</li>
<li>甘桔</li>
<li>梨</li>
</ul>
<input id="hidval" type="hidden" value="0"/>
</div>

<script type="text/javascript">
$(function () {
$("h4").bind("click", function () {
if ($("#hidval").val() == 0) {
$("ul").show(3000,function(){ //元素渐渐显现
$("#hidval").val(1);
})
} else {
$("ul").hide("slow",function(){
$("#hidval").val(0);
})
}
})
});
</script>
</body>

2、toggle()方法可实现与show和hide同样的功能
调用toggle()方法的调用格式是：

实现上面1中隐藏与显示效果

3、slideUp()和slideDown()方法在页面中滑动元素
前者用于向上滑动元素，后者用于向下滑动元素，它们的调用方法分别为：
$(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback])
slideDown()仅适用于被隐藏的元素；slideup()则相反。

<body>
<h3>使用slideUp()和slideDown()方法的滑动效果</h3>
<div>
<h4>我喜欢吃的水果</h4>
<ul>
<li>苹果</li>
<li>甘桔</li>
<li>梨</li>
</ul>
<input id="hidval" type="hidden" value="0"/>
</div>
<script type="text/javascript">
$(function () {
$("h4").bind("click", function () {
if ($("#hidval").val() == 0) {
$("ul").slideUp(3000,function(){
$("#hidval").val(1);
})
} else {
$("ul").slideDown(3000,function(){
$("#hidval").val(0);
})
}
})
});
</script>
</body>

4、slideToggle()方法可以切换slideUp()和slideDown()
调用该方法时，如果元素已向上滑动，则元素自动向下滑动，反之，则元素自动向上滑动，格式为：

<body>
<h3>使用slideToggle()方法切换滑动效果</h3>
<div>
<h4>
<span class="fl">我喜欢吃的水果</span>
<span class="fr" id="spnTip">向下滑</span></h4>
<ul>
<li>苹果</li>
<li>甘桔</li>
<li>梨</li>
</ul>
<input id="hidval" type="hidden" value="0"/>
</div>
<script type="text/javascript">
$(function () {
var $spn = $("#spnTip");
$("h4").bind("click", function () {
$("ul").slideToggle(3000,function(){
$spn.html() == "向下滑" ? $spn.html("向上滑") : $spn.html("向下滑");
})
})
});
</script>
</body>

5、fadeIn和fadeOut实现淡入淡出效果
fadeIn()和fadeOut()方法可以实现元素的淡入淡出效果，前者淡入隐藏的元素，后者可以淡出可见的元素，它们的调用格式分别为：

6、fadeTo()方法设置淡入淡出效果的不透明度
该方法的调用格式为

0 0