1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > jQuery中的slideUp() slideDown() hide() show()

jQuery中的slideUp() slideDown() hide() show()

时间:2018-10-21 22:28:46

相关推荐

jQuery中的slideUp() slideDown() hide() show()

slideUp(speed,[callback])

通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏起来。

slideDown(speed,[callback])

通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来

hide()

隐藏显示的元素 这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西。

show()

显示隐藏的匹配元素。 这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。 <head>

<title>slideUp()和slideDown()</title>

<style type="text/css">

<!--

body{

background:url(bg.jpg);

}

img{

border:1px solid #000000;

margin:8px;

}

input{

border:1px solid #000000;

font-size:13px; padding:2px;

font-family:Arial, Helvetica, sans-serif;

background-color:#FFFFFF;

color:#000000;

}

div{

background-color:#FFFF00;

height:80px; width:80px;

border:1px solid #000000;

float:left; margin-top:8px;

}

-->

</style>

<script language="javascript" src="jquery.min.js"></script>

<script language="javascript">

$(function(){

$("input:eq(0)").click(function(){

$("div").add("img").slideUp(1000);

});

$("input:eq(1)").click(function(){

$("div").add("img").slideDown(1000);

});

$("input:eq(2)").click(function(){

$("div").add("img").hide(1000);

});

$("input:eq(3)").click(function(){

$("div").add("img").show(1000);

});

});

</script>

</head>

<body>

<input type="button" value="SlideUp">

<input type="button" value="SlideDown">

<input type="button" value="Hide">

<input type="button" value="Show"><br>

<div></div><img src="test.jpg">

</body>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。