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

Jquery，你知多少？(二)

2013-12-17 16:08 141 查看
这篇博客主要说说利用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'});
});


这些效果的实现非常简单，提高了界面的动态功能，更灵活方便。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航