zoukankan      html  css  js  c++  java
  • jquery02-jQuery效果=隐藏和显示+切换+淡入淡出+滑动+动画+回调+链

    隐藏和显示

    $(selector).hide(speed,callback);  
    $(selector).show(speed,callback);  

    可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是隐藏或显示完成后所执行的函数名称。$("p").hide(1000);

     toggle()方法来切换 hide() 和 show() 方法,$("p").toggle();

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

    可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

    淡入淡出--jQuery Fading 方法

    fadeIn() 用于淡入已隐藏的元素。

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

    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。.

    可选的 callback 参数是 fading 完成后所执行的函数名称。

     $("#div2").fadeIn("slow");
     $("#div3").fadeIn(3000);

    fadeOut() 方法用于淡出可见元素。

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

    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是 fading 完成后所执行的函数名称。

     fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

    如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

    如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

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

    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是 fading 完成后所执行的函数名称。

     fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

    $(selector).fadeTo(speed,opacity,callback);

    必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

    fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

    可选的 callback 参数是该函数完成后所执行的函数名称。

    $("#div3").fadeTo("slow",0.7);

    滑动

    slideDown() 方法用于向下滑动元素。

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

    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是滑动完成后所执行的函数名称。

    slideUp() 方法用于向上滑动元素。

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

    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是滑动完成后所执行的函数名称。

    slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

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

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

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

    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是滑动完成后所执行的函数名称。

    动画 - animate() 方法

    jQuery animate() 方法用于创建自定义动画。

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

    必需的 params 参数定义形成动画的 CSS 属性。

    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是动画完成后所执行的函数名称。

     animate() - 操作多个属性

    请注意,生成动画的过程中可同时使用多个属性:

    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      '150px'
    });

    可以用 animate() 方法来操作所有 CSS 属性吗?
    是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel (驼峰)标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。同时,色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画,您需要从 jquery.com 下载 Color Animations 插件。

    animate() - 使用相对值

    可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:

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

    animate() - 使用预定义的值

    您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":

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

    animate() - 使用队列功能

    默认地,jQuery 提供针对动画的队列功能。这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

    $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({'100px',opacity:'0.8'},"slow");
    });

    $("button").click(function(){
    var div=$("div");
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
    });

    停止动画

    jQuery stop() 方法用于在动画或效果完成前对它们进行停止,适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

    $(selector).stop(stopAll,goToEnd);

    可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

    可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

    因此,默认地,stop() 会清除在被选元素上指定的当前动画。$("#panel").stop();

     callback 实例

    以下实例在隐藏效果完全实现后回调函数:
    $("button").click(function(){
       $("p").hide("slow",function(){
          alert("The paragraph is now hidden");
         });
    });

    以下实例没有回调函数,警告框会在隐藏效果完成前弹出:

    没有 callback(回调)

    $("button").click(function(){
      $("p").hide(1000);
      alert("The paragraph is now hidden");
    });

    方法链接

    有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条,把动作/方法链接在一起。

    提示: 这样的话,浏览器就不必多次查找相同的元素。

    如需链接一个动作,您只需简单地把该动作追加到之前的动作上。

    下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色,然后向上滑动,再然后向下滑动:

    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
     
    在平凡中坚持前行,总有一天,会遇见优秀的自己
  • 相关阅读:
    eslint 的 env 配置是干嘛使的?
    cookie httpOnly 打勾
    如何定制 antd 的样式(theme)
    剑指 Offer 66. 构建乘积数组
    剑指 Offer 65. 不用加减乘除做加法
    剑指 Offer 62. 圆圈中最后剩下的数字
    剑指 Offer 61. 扑克牌中的顺子
    剑指 Offer 59
    剑指 Offer 58
    剑指 Offer 58
  • 原文地址:https://www.cnblogs.com/mao-19/p/7280594.html
Copyright © 2011-2022 走看看