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

搜索

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

jQuery 效果 - 滑动

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

    jQuery 效果 - 滑动

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

    滑动效果类似于淡入与淡出效果,向以前我们还要写一大堆代码来实现滑动的效果,现在使用Jquery只需要一个函数即可搞定。

    在jjQuery可以实现滑动的方法如下:

    1、jQuery slideDown() 方法

    jQuery slideDown() 方法的用途和效果是向选定元素下方滑动展示。

    $(selector).slideDown(speed,callback);

    语法如上,其中:

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

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

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

    实例说明:
    $("p").click(function(){
      $("p").slideDown();
    });

    2、jQuery slideUp() 方法

    jQuery slideUp() 方法与slideDown相反,是向元素上方滑动。

    $(selector).slideUp(speed,callback);

    语法如上,其中:

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

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

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

    实例说明:
    $("p").click(function(){
      $("p").slideUp();
    });

    3、jQuery slideToggle() 方法

    jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。类似于jQuery fadeToggle() 方法,是一个综合方法。

    如果元素已下滑,则 slideToggle() 可向上滑动它们。

    如果元素已上滑,则 slideToggle() 可向下滑动它们。

    $(selector).slideToggle(speed,callback);

    语法如上,其中:

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

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

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

    实例说明:
    $("p").click(function(){
      $("p").slideToggle();
    });
赞一个(0)     踩一个(0)    

相关链接