学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>jQuery>>基础教程>>

jQuery 效果- 动画

发布时间:2021-06-16点击:

    jQuery 效果 - 动画

    上次说的是Jquery的滑动效果,本章就说说另一个使用的效果——动画。

    这个动画的功能可以说还是很强大的,不仅可以实现淡入淡出,也可以实现滑动以及隐藏与显示等效果,但是要求您有不低的CSS功底。

    jQuery animate() 方法就是实现动画的jQuery方法,这个方法可以让你自定义动画,包括元素平移、滑动等CSS效果切换。

    1、jQuery动画效果语法

    $(selector).animate({params},speed,callback);

    语法如上,其中:

    selector:选择器,选择需要滑动的元素;

    speed:滑动的速度,可选值有:slow、fast或者指定的毫秒值,可选;

    callback:是方法animate()执行完成后执行的方法函数。

    实例说明:
    $("button").click(function(){
      $("div").animate({left:'200px'});
    });
    

    PS:其中left:200px的意思是设置div的左边界为200px开始,也就是相当于把div这个元素向右移动了200px;

    除了以上单一设置外,jQuery animate()方法还可以同时设置多个CSS参数,并且参数也可以使用相对值以及预定义值。

    1)jQuery animate()方法操作多个参数实例

    $("button").click(function(){
      $("div").animate({
        left:'200px',
        opacity:'0.5',
        height:'500px',
        width:'150px'
      });
    });
    

    2)jQuery animate()方法使用参数相对值以及预定义值实例

    $("button").click(function(){
      $("div").animate({
        left:'+=150px',
      });
    });
    

    其中left:'+=150px'de 的意思是读取当前的left然后加上150px,这是使用参数相对值的用法;

    $("button").click(function(){
      $("div").animate({
        height:'toggle'
      });
    });
    

    其中toggle是预定义值,其他预定义值有:"show"、"hide" 或 "toggle"。

    最后请注意,如果你同时设置了多个animate()方法的话,那么程序不会同时执行这些设置,jQuery只会一个一个执行,就相当于排队执行,只有前面的jQuery animate()方法执行完成了,才会执行后面的jQuery animate()方法。

赞一个(0)     踩一个(0)    

相关链接