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

jquery效果

2016-01-14 20:43 645 查看 
//隐藏显示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>index.html</title>
<script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
<button id="toggle" type="button">切换</button>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(1000);
});
$("#show").click(function(){
$("p").show(1000);
});
$("#toggle").click(function(){
$("p").toggle(1000);
});
});
</script>
</body>
</html>

//淡入淡出
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index.html</title>
<script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<button id="fadeIn" type="button">淡入</button>
<button id="fadeOut" type="button">谈出</button>
<button id="toggle" type="button">切换</button>
<button id="fadeTo" type="button">fadeTo</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>

<script>
$(document).ready(function(){
$("#fadeIn").click(function(){
$("#div1").fadeIn(3000);
});
$("#fadeOut").click(function(){
$("#div1").fadeOut(1000);
});
$("#toggle").click(function(){
$("#div1").fadeToggle();
});
$("#fadeTo").click(function(){
$("#div1").fadeTo("slow",0.4); //opacity:1为完全不透明
});
});
</script>
</body>
</html>

//滑动效果，停止，链式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index.html</title>
<script src="js/jquery-2.1.4.min.js"></script>
<style rel="stylesheet">
.menu, .panel{
width: 500px;
padding: 5px;
margin: 0 auto;
text-align: center;
background: #e5eecc;
border: 1px solid #c3c3c3;
}
.panel{
height: 120px;
display: none;
}
</style>
</head>
<body>
<p class="menu">
<button class="slideDown">slideDown</button>
<button class="slideUp">slideUp</button>
<button class="slideToggle">slideToggle</button>
<button class="stop">stop</button>
<button class="chain">chain</button>
</p>
<div class="panel">
<p>hello world!</p>
<p>how are you?</p>
</div>

<script>
$(document).ready(function(){
$(".slideDown").click(function(){
$(".panel").slideDown("slow");
});
$(".slideUp").click(function(){
$(".panel").slideUp(1000,function(){
alert("The paragraph is now hidden");
});
});
$(".slideToggle").click(function(){
$(".panel").slideToggle(5000);
});
$(".stop").click(function(){
$(".panel").stop();
});
$(".chain").click(function(){
$(".panel").css("color","red")
.slideDown(2000)
.slideUp(2000);
});
});
</script>
</body>
</html>

//动画
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>index.html</title>
<script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航