2015/12/27--jquery(02)-优快云博客

本文介绍了jQuery中实现元素显示隐藏及动画效果的方法，包括slideDown、slideUp、slideToggle等基本动画，animate方法及其各种用法，例如操作多个属性、使用相对值等，并展示了如何使用stop方法暂停动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jquery滑动</title>
<script src = "/h5/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
jQuery slideDown()
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideDown("slow");
});
});
jQuery slideUp()
$(document).ready(function(){
$(".flip1").click(function(){
$(".pane2").slideDown("slow");
});
});
jQuery slideToggle()
$(document).ready(function(){
$(".flip").click(function(){
$("pane1").slideDown("slow");
});
});
jQuery 动画 - animate() 方法
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
jQuery animate() - 操作多个属性
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
width:'150px';
height:'150px';
left:'250px';
opacity:'0.5';
}
);
});
});
Query animate() - 使用相对值
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'+=150px'
width:'+=150px'
left:'+=250px'
});
});
});
jQuery animate() - 使用预定义的值
$(document).ready(function(){
$("button").click(function(){
$("div").animate(
{ height:'toggle' }
);
});
});
jQuery animate() - 使用队列功能
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({height:'300px',opacity:"0.4"},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({height:'300px',opacity:'0.8'},"slow");
});
});
jQuery animate() - 使用队列功能(02)
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
$(document).ready(function(){
$("#flip2").click(function(){
$("#pane3").slideDown(5000);
});
$("#stop").click(function(){
$("#pane3").stop();
});
});
</script>
<style type="text/css">
div.pane1,p.flip{
margin: 0px;
padding: 5px;
text-align: center;
background-color: #e5eecc;
boeder:solid 1px #c3c3c3;
}
div.pane1{
height: 120px;
display: none;
}
div.pane2,p.flip1{
margin: 0px;
padding: 5px;
text-align: center;
background-color: #e5eecc;
boeder:solid 1px #c3c3c3;
}
div.pane2{
height: 240px;
display: none;
}
</style>
</head>
<body>

<div class="pane1">
<p>只有你自己才能够决定你自己的路。</p>
<p>心朝大海，春暖花开。</p>
</div>
<p class="flip">Click me!</p>

<div class="pane2">
<p>I am crazy!</p>
<p>每个人都有秘密。</p>
</div>
<p class="flip1">点击我！</p>

<button>开始动画。</button>
<p>在默认情况下，所有html元素的位置都是静止的，无法移动的。如需对位置经行操作，记得首先把元素的css position属性调整成
relative,fixed或者absolute.</p>
<div style="background-color: #98bf21;width: 100px;height: 100px;position: absolute;"></div>
<div style="background-color: #98bf21;width: 100px;height: 100px;position: absolute;">Hello</div>

<button id = "stop">停止滑动</button>
<div id = "flip2">点击这里，向下滑动。</div>
<div id = "pane3">Hello my dear!</div>
</body>
</html>