您的位置：首页 > Web前端 > JQuery

jQuery动画效果

2016-04-26 14:32 731 查看

工作中遇到了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中隐藏与显示效果

<script type="text/javascript">

$(function () {

var $spn = $("#spnTip");

$("h4").bind("click", function () {

$("ul").toggle(3000,function(){

$spn.html() == "隐藏" ? $spn.html("显示") : $spn.html("隐藏"); //实现1中下拉框显示与隐藏效果，显示后再次点击隐藏效果是自动的，不需要额外代码

})

});

});

</script>

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()方法设置淡入淡出效果的不透明度

该方法的调用格式为

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航