您的位置: 首页  >  IT文章  >  JQuery中的动画片

JQuery中的动画片

分类: IT文章 • 2022-06-12 22:21:53
JQuery中的动画

使用jquery可以很轻松地为网页添加动画效果。本篇文章我们来了解jquery中的动画。

show()和hide()方法

这两个方法是最基本的两个方法，show()方法显示对象，hide()方法隐藏元素。我们可以为这两个方法添加参数，从而让元素动起来。
直接提供一个毫秒数作为参数，指定选中元素在多少毫秒内完成显示或隐藏。也可以输入以下三个字符串参数中的其中一个，’slow’，’normal’和’fast’，他们对应的数值是600,400和200毫秒。具体用法如下：

$('#content').hide('slow');
$('#content').show(600);

本质上，这两个方法会修改选中元素的高度，宽度和不透明度，最终将元素的display设置为none，修改之前会记录下来元素原来的display属性值，以便还原。

fadeIn()和fadeOut()方法

这两个方法也可以用来创建动画，与show()和hide()不同的是，fadeOut()方法会逐渐减少选中元素的不透明度，逐渐淡出视野，即不可见，而fadeIn()则正好想法，它会逐渐增加元素的不透明度，直至完全不透明，即可见。
这两个方法与show()和hide()方法接收同样的参数。

slideUp()和slideDown()方法

这两个方法也可以用来创建动画，slideDown()方法会逐渐减少选中元素的高度，直至高度为0，即不可见，slideUp()方法会逐渐增加选中元素的高度，直至高度达到原来的高度，即可见。
这两个方法同样与show()和hide()方法接收同样的参数。

animate()方法

上面的六个方法，是分别修改元素的某个或某几个属性，以实现动画效果。尽管这六个方法能满足大多数情况下的需要，但是它们并不能满足所有使用场景，而animate方法可以更加个性化地来自定义动画效果。下面是animate()方法的语法结构

animate(params,speed,callback)

params是一个json对象，可以包含多个CSS属性和值，如{ width : ‘200px’ , ‘height’ : ‘400px’ }
speed是完成动画的毫秒数，指定选中元素需要在多长时间将属性值修改为params所设置的值
callback是一个回调函数，当动画效果完成后会被调用。
下面来看示例代码

<style>
    #span1{
        position: fixed;
        top: 10px;
        right: 10px;
        background-color: yellow;
    }
</style>
<script src="jquery-1.9.1.js"></script>

 <script>
     $(function(){ 

    $('#span1').animate({top:'500px',right:'500px',paddingLeft:'50px'},1000,function(){
    alert('animation complete');
});
     });

 </script>
 <body>
     <span id="span1">hello,world</span>
</body>

如果属性的值是数值类型，animate方法还支持使用累加或累减来修改属性

$('#span1').animate({top:'+=500px',right:'+=500px',paddingLeft:'50px'},1000,function(){
    alert('animation complete');
});

使用animate方法并不能设置所有的CSS属性，比如，颜色是不能产生动画的，还有一点需要注意，如果css属性中包含’-‘，需要将改属性修改为驼峰命名法则，如，CSS属性’padding-left’，由于它不能作为JavaScript中的合法标识符，所以，需要将它修改为paddingLeft，就像上面的代码中出现的那样。
如果某个元素执行的动画比较多，或者比较慢，可能需要手动地停止动画。下面的代码判断选中元素是否正在执行动画，如果是，则停止动画

if($('#span1').is(':animated')){
    $('#span1').stop();
}

相关推荐