首先是介绍函数:
第一个函数是: slideDown()是用于向下滑动元素。完整的函数是这样的slideDown(speed,callback);
speed是规定效果的时长。
callback是滑动完成之后的所执行的函数的名称。
第二个函数是:slideUp();这个函数是用于向上滑动的元素。函数的完整版是:slideUp(speed,callback);
第三个函数是slideToggle();这个函数是当元素向下滑动,则slideToggle是向上滑动他们。
当元素向上滑动的时候,slideToggle是向下滑动他们。
上面的是滑动元素,我们也可以更为自由的是设置动画怎样来设置动画
设置动画是用到的animate()这个函数。其实所谓的创建动画可以认为是改变元素的属性,在这个地方我们应该记住的
一个属性是opacity这个是设置元素的透明度,并且这个值的范围是0到1.我们可以操作一个属性,也可以让多个属性都产生个人都产生动画。而且我们可以使用相对值,这个在下面的例子中都有提到。还有就是我们的动作是可以产生
串联的。具有队列功能。
而且我们也可以让动画停止。利用的到的函数是stop这个函数。
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<meta charset="utf-8">
<style type="text/css">
body, p
{
padding: 0;
border:0px;
margin: 0px;
}
.div1
{
width: 100%;
height: 20px;
background-color:#BBE644;
text-align: center;
}
.hr1
{
margin-top:-5px;
border:5px solid #BBCA92;
margin-bottom:-5px;
}
.div2
{
display:none;
width: 100%;
height: 100px;
background-color:#BBE644;
text-align: center;
}
</style>
<script type="text/javascript">
/*$(document).ready(function(){
$(".div1").click(function(){
$(".div2").slideDown("slow");
});
});
$(document).ready(function(){
$(".div1").dblclick(function(){
$(".div2").slideUp();
});
});
$(document).ready(function(){
$(".div1").click(function(){
$(".div2").slideToggle();
});
});
$(document).ready(function(){
$(".div3").click(function(){
$('.div3').animate({left:'250px'});
});
});
$(document).ready(function(){
$("button").click(function(){
$(".div3").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});*/
/*$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},'slow');
div.animate({width:'300px',opacity:'0.4'},'slow');
div.animate({height:'100px',opacity:'0.4'},'slow');
div.animate({width:'100px',opacity:'0.4'},'slow');
});
});
$("document").ready(function(){
$("button").click(function(){
$("#div6").animate({
width:"+=300px",
height:"+=400px"
});
});
});*/
$(document).ready(function(){
$("#btn1").click(function(){
$("#div6").animate({
// 这个要知道的是里面必须用双引号
width: "+=150px",
height:"+=190px"
});
});
});
$(document).ready(function(){
$("#div5").click(function(){
$("#div6").slideToggle(5000);
});
});
$(document).ready(function(){
$("#btn2").click(function(){
$("#div6").stop();
});
});
</script>
<title></title>
</head>
<body>
<!-- 现在我要做的就是让元素有滑动的效果 -->
<!-- <div class="div1">点击我</div> -->
<!-- <div class="div2"> -->
<!-- <p style="padding-top:50px;padding-bottom:50px;">Hello world</p> -->
<!-- </div> -->
<!-- <button style="padding:0px;">点我</button>
<div class="div3" style="background-color:red;width:200px;height:200px;position:absolute"></div><br/>
<hr/>
<p>点击我</p>
<div class="div4" style="background-color:green;height:100px;width:100px;"></div>-->
<!-- 创建一个按钮,来控制一个动画,然后我们通过控制动画
当动画在执行的过程中,然后点击另外的一个按钮动画暂停 -->
<button id="btn1">点击我执行动画</button>
<button id="btn2">点击我停止动画</button>
<div id="div5" style="background-color:red;width:100px;height:100px">点击我触发另外的一个事件</div>
<div id="div6" style="background-color:yellow;width:100px;height:200px;display:none;">Hello world</div>
</body>
</html>