Jquery，你知多少？(二)

来源：互联网发布：盛通股份编程猫编辑：程序博客网时间：2024/04/28 21:20

这篇博客主要说说利用Jquery实现一些效果，在界面的设计上经常要用到各种效果，其实Jquery实现起来非常容易。

一、Hide() 和 Show()

1.Jquery可以使用hide()和show()方法实现html元素的隐藏和显示

实例如下：

<head><script src="JQuery.js"></script><script type="text/javascript">$(document).ready(function(){  //页面就绪函数  $("#hide").click(function(){  //id为hide的元素，实现点击事件  $("p").hide(); //<p>元素实现隐藏方法  });  $("#show").click(function(){  //id为show的元素实现鼠标点击事件  $("p").show();  //<p>元素实现显示方法  });});</script></head><body><p id="p1">如果点击“隐藏”按钮，我就会消失。</p><button id="hide" type="button">隐藏</button><button id="show" type="button">显示</button></body>

2.toggle()方法可以切换hide()和show()方法，显示被隐藏的，隐藏已显示的

实例：

<html><head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").click(function(){ //$("button")等同于$(this)  $("p").toggle(); //<p>元素执行toggle()方法  });});</script></head><body><button type="button">切换</button><p>这是一个段落。</p><p>这是另一个段落。</p></body></html>

二、FadeIn() 和 FadeOut()实现淡入淡出

1.FadeIn()方法用于淡入已经隐藏的元素,fadeIn()中的参数可以是："slow","fast"或者毫秒

实例：

<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){  $("button").click(function(){    $("#div1").fadeIn(); //第一个无参数    $("#div2").fadeIn("slow"); //第二个慢慢淡入    $("#div3").fadeIn(3000); //3秒淡入  });});</script></head><body><p>演示带有不同参数的 fadeIn() 方法。</p><button>点击这里，使三个矩形淡入</button><br><br><div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div></body></html>

2.FadeOut()方法淡出可见元素，参数取值同上

实例：

<script type="text/javascript">$(document).ready(function(){  $("button").click(function(){    $("#div1").fadeOut();    $("#div2").fadeOut("slow");    $("#div3").fadeOut(3000);  });});</script>

3.fadeToggle()方法：如果元素已淡入，则此方法添加淡出效果，如果元素已淡出，此方法添加淡入效果，参数同上

<script>$(document).ready(function(){  $("button").click(function(){    $("#div1").fadeToggle();    $("#div2").fadeToggle("slow");    $("#div3").fadeToggle(3000);  });});</script>

三、SlideUp()和SlideDown()

1.slideUp()顾名思义是向上滑动的意思，参数："slow","fast"或者毫秒

实例：

<script type="text/javascript"> $(document).ready(function(){  $(".flip").click(function(){    $(".panel").slideUp("slow");  });});</script>

2.slideDown()向下滑动

$("#flip").click(function(){  $("#panel").slideDown();});

3.slideToggle()方法可以在slideUp()和slideDown之间切换

实例：

$("#flip").click(function(){  $("#panel").slideToggle();});

四、animate()

JQuery animate()方法用于创建自定义的动画，可以对left，top值设定一定时间的变化，达到动画效果

实例：

$("button").click(function(){  $("div").animate({left:'250px'});});

这些效果的实现非常简单，提高了界面的动态功能，更灵活方便。

0 0