jquery1.3API的effects部分

最新推荐文章于 2022-02-07 20:43:49 发布

dujingjing1230

最新推荐文章于 2022-02-07 20:43:49 发布

阅读量987

点赞数

文章标签： jquery api callback function div button

本文链接：https://blog.csdn.net/dujingjing1230/article/details/4252990

版权

差不多就是能做出一些动态效果的函数。

首先是基础部分:

1.show()

显示那些匹配的被隐藏的元素。和show(speed,[callback])差不多,只是没有动画效果。对于那些已经显示的元素不会有任何效果,同时不管匹配的元素是何种方式隐藏都会通过show()显示出来。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"></script> </head> <body> <p style="display:none" mce_style="display:none">Hello 1</p> </body> </html>

2.show(speed,callback):

这个函数是以动画的形式显示出匹配的元素并且在元素都显示出来后执行一个callback。元素的高度，宽度等等都会以一定得速度来同步显示。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"></mce:script> <mce:style></mce:style><style mce_bogus="1"> div { background:#def3ca; margin:3px; width:80px; display:none; float:left; text-align:center; } </style> </head> <body> <button id="showr">Show</button> <button id="hidr">Hide</button> <div>Hello 3,</div> <div>how</div> <div>are</div> <div>you?</div> </body> </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script> <mce:script type="text/javascript"></mce:script> <mce:style></mce:style><style mce_bogus="1"> span { display:none; } div { display:none; } p { font-weight:bold; background-color:#fcd; } </style> </head> <body> <button>Do it!</button> <span>Are you sure? (type 'yes' if you are) </span> <div> <form> <input type="text" /> </form> </div> <p style="display:none;" mce_style="display:none;">I'm hidden...</p> </body> </html>

这里需要注意一下show(speed)的参数speed可以设置为normal,slow,fast或者是设置为微妙来计算,比如1000。

3，4：hide().hide(speed,[callback]);

这两个函数和上面的show意思相同,只是作用刚好相反。

5. toggle():

可以逐个显示匹配的元素。如果是隐藏的toggle可以使它显示,如果是显示的,toggle可以让它隐藏。

6.toggle(switch):

这个函数的参数switch是个波尔类型,如果是true就会显示所有的匹配元素,反之会隐藏所有的匹配元素。

7.toggle(speed,[callback]):

这个函数相当于show(speed,[callback])和hide(speed,[callback])相结合,它可以让匹配的元素以一定得动画效果显示或隐藏,speed和show的参数取值类似。

第二部分是sliding部分:

这个一般会用来最小化某个模块使用,可以使用这几个函数做出很多不错的效果,igoogle就有类似于这部分的东西。

1.slideDown(speed,[callback]):

这个函数用来把匹配元素的高度从上到下慢慢展示出来。在jQuery1.3中这个展现的速度更加先得平滑。

下面的例子是通过点击一个button把一些隐藏的div从上到下慢慢的滑动出来。

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){

    $(document.body).click(function () {
      if ($("div:first").is(":hidden")) {
        $("div").slideDown("slow");
      } else {
        $("div").hide();
      }
    });

});
</script>
<style>
div { background:#de9a44; margin:3px; width:80px;
        height:40px; display:none; float:left; }
</style>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
</body>
</html>

参数介绍: speed就不用说了,还是那几个slow,normal和fast,或者是设置多少毫秒后滑动出来。callback是当元素完全滑动出来后调用一个函数。

2.slideUp(speed,[callback]):

这个函数的功能和上面那个相反,可就是用来隐藏COM控件。参数和上面那个相同,而且也是一点一点按照COM控件的高度来隐藏的。

下面是个例子：

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){

    $(document.body).click(function () {
      if ($("div:first").is(":hidden")) {
        $("div").show("slow");
      } else {
        $("div").slideUp();
      }
    });

});
</script>
<style>
div { background:#3d9a44; margin:3px; width:80px;
        height:40px; float:left; }
</style>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

3.slideToggle(speed,[callback]):

一看有toggle这个词,很明显是来回切换两个函数的。这里是把上面介绍的两个函数的功能整合到一块了。比如:第一次对某些COM控件执行这个函数会显示出来控件,再次执行这个函数就会隐藏那些CO控件。

参数也不用说了,和上面的相同。

看个例子吧:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){

    $("button").click(function () {
      $("p").slideToggle("slow");
    });

});
</script>
<style>
p { width:400px; }
</style>
</head>
<body>
<button>Toggle</button>
<p>
    This is the paragraph to end all paragraphs. You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life. Congratulations!
</p>
</body>
</html>

第三部分是Fading部分:也就是渐渐消退。

1.fadeIn(speed,callback):

通过设置匹配控件的透明度来显示某些隐藏着的控件。参数和上面几个函数相同就不说了。

看个例子:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){

    $(document.body).click(function () {
      $("div:hidden:first").fadeIn("slow");
    });

});
</script>
<style>
span { color:red; cursor:pointer; }
div { margin:3px; width:80px; display:none;
        height:80px; float:left; }
div#one { background:#f00; }
div#two { background:#0f0; }
div#three { background:#00f; }
</style>
</head>
<body>
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>

另外可以使用这个函数让一个弹出框慢慢显示出来，然后点击关闭时用fadeOut(speed,[callback])来慢慢隐藏掉弹出框。

2.fadeOut(speed,[callback]):

很明显是上面这个函数的相反功能,通过设置透明度慢慢隐藏掉某些控件。

参数就不用说了还是那几个。

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){

    $("p").click(function () {
      $("p").fadeOut("slow");
    });

});
</script>
<style>
p { font-size:150%; cursor:pointer; }
</style>
</head>
<body>
<p>
    If you click on this paragraph
    you'll see it just fade away.
</p>
</body>
</html>

3.fadeTo(speed,opacity,[callback]):

这个函数是第二个函数的功能扩展,注意它的参数opacity用来设置最终得效果,也就是最终的透明度,可以设置为0-1之间的数字。如果是0那就相当上面那个函数了。

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){

    $("p:first").click(function () {
      $(this).fadeTo("slow", 0.33);
    });

});
</script>

</head>
<body>
<p>
    Click this paragraph to see it fade.
</p>
<p>
    Compare to this one that won't fade.
</p>
</body>
</html>

第四部分是Custom:

也就是说是用来做用户自定义的动画了。有点像flash了哈。

1.animate(params,[duration],[easing],[callback]):

待续。。。

dujingjing1230

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery1.3API的effects部分

差不多就是能做出一些动态效果的函数。首先是基础部分:1.show()显示那些匹配的被隐藏的元素。和show(speed,[callback])差不多,只是没有动画效果。对于那些已经显示的元素不会有任何效果,同时不管匹配的元素是何种方式隐藏都会通过show()显示出来。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E
复制链接

扫一扫