详解jQuery动画

jQuery的动画主要分为两个大方面:内置动画和自定义动画,本文主要学习个讲解这两个方面。

一.内置动画:
1.显示hide()/隐藏show()/显示或隐藏toggle()

代码如下:

<style>
        #box{width: 100px;height: 100px;background: red;}
</style>
<body>
<input type="button" id="btn1" value="隐藏">
<input type="button" id="btn2" value="显示">
<input type="button" id="btn3" value="隐藏/显示">
</body>
<script>
 $("#btn1").click(function(){
        $("#box").hide();
    })
    $("#btn2").click(function(){
        $("#box").show();
    })
    $("#btn3").click(function(){
        $("#box").toggle();
    })
</script>

2.上拉slideUp()/下拉slideDown()/上拉或下拉slideToggle()

	代码如下:
<style>
        #box{width: 100px;height: 100px;background: red;}
</style>
<body>
<input type="button" id="btn1" value="上拉">
<input type="button" id="btn2" value="下拉">
<input type="button" id="btn3" value="上拉/下拉">
</body>
<script>
 $("#btn1").click(function(){
        $("#box").slideUp();
    })
    $("#btn2").click(function(){
        $("#box").slideDown();
    })
    $("#btn3").click(function(){
        $("#box").slideToggle();
    })
</script>

3.淡出fadeOut()/淡入fadeIn()/淡出或淡入fadeToggle()

代码如下:

<style>
        #box{width: 100px;height: 100px;background: red;}
</style>
<body>
<input type="button" id="btn1" value="淡入">
<input type="button" id="btn2" value="淡出">
<input type="button" id="btn3" value="淡入/淡出">
</body>
<script>
 $("#btn1").click(function(){
        $("#box").fadeOut();
    })
    $("#btn2").click(function(){
        $("#box").fadeIn();
    })
    $("#btn3").click(function(){
        $("#box").fadeToggle();
    })
</script>

以上方法中可以接受两个参数,分别是:
参数1:动画执行的时间或者表示速度的字符串,可省略。
参数2:回调函数,在动画完成之后执行的内容,可省略。如:

$("#btn1").click(function(){
$("#box").hide(200,“linear”,function(){
alert(“动画结束了”)
});
})

4.半透明fadeTo()

代码如下:

<style>
        #box{width: 100px;height: 100px;background: red;}
</style>
<body>
<input type="button" id="btn" value="半透明">
</body>
<script>
 $("#btn").click(function(){
        $("#box").fadeTo(1000,0.2);
    }
</script>

此方法可以将被选元素的不透明度逐渐地改变为指定的值,
可以接受三个参数,分别是:
参数1:动画执行的时间,可省略。
参数2:透明度的数值,介于0-1之间。不可省略。
参数3:回调函数,在动画完成之后执行的内容。

二.自定义动画:
jQuery同时提供了animate()方法,能够使开发者自定义动画。

animate()方法可接受三个参数:
参数1:对象,即为希望进行变化的css属性列表,以及希望变化到的最终值,必选
参数2::动画运动的时间,可省略
参数3::回调函数,表示动画结束后要做的事情,可省略

代码如下:

<style>
        #box{width: 100px;height: 100px;position: absolute;left: 0;top:30px;background: red;}
</style>
<body>
    <input type="button" id="btn" value="动画">
    <div id="box"></div>
</body>
<script>
    $("#btn").click(function(){
        $("#box").animate({
            width:0,
            height:0,
            left:50,
            top:80
        },2000,function(){
            alert("结束了");
        });
</script>

需要注意的是:animate()方法中参数1中的变量遵循camel命名方式。例如paddingLeft不能写成padding-left.并且只能是css中用数值表示的属性。例如width、top、opacity等
像backgroundColor这样的属性不被animate()方法支持。

以上为jQuery动画详解,如有误,望指正。

你可能感兴趣的:(jquery,javascript,前端)