为了账号安全,请及时绑定邮箱和手机立即绑定
  • stop还有几个可选的参数,简单来说可以这3种情况

    • .stop(); 停止当前动画,点击在暂停处继续开始

    • .stop(true); 如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。当调用.stop()的时候,队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行

    • .stop(true,true); 当前动画将停止,但该元素上的 CSS 属性会被立刻修改成动画的目标值

    简单的说:参考下面代码、

    $("#aaron").animate({
        height: 300
    }, 5000)
    $("#aaron").animate({
        width: 300
    }, 5000)
    $("#aaron").animate({
        opacity: 0.6
    }, 2000)
    1. stop():只会停止第一个动画,第二个第三个继续

    2. stop(true):停止第一个、第二个和第三个动画

    3. stop(true ture):停止动画,直接跳到第一个动画的最终状态 


    查看全部
  • jQuery中动画animate(上)

    有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就需要强大的animate方法了

    操作一个元素执行3秒的淡入动画,对比一下2组动画设置的区别

    $(elem).fadeOut(3000)   $(elem).animate({        opacity:0 },3000)

    显而易见,animate方法更加灵活了,可以精确的控制样式属性从而执行动画

    语法:

    .animate( properties ,[ duration ], [ easing ], [ complete ] ) .animate( properties, options )

    .animate()方法允许我们在任意的数值的CSS属性上创建动画。2种语法使用,几乎差不多了,唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似,除了属性范围做了更多限制。第二个参数开始可以单独传递多个实参也可以合并成一个对象传递了

    参数分解:

    properties:一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的,除非另有说明;这些属性如果不是数字的将不能使用基本的jQuery功能。比如常见的,border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。background-color很明显不可以,因为参数是red或者GBG这样的值,非常用插件,否则正常情况下是不能只用动画效果的。注意,CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")。

    特别注意单位,属性值的单位像素(px),除非另有说明。单位em 和 %需要指定使用

    .animate({     left: 50,      width: '50px'        opacity: 'show',       fontSize: "10em", }, 500);

    除了定义数值,每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏

    .animate({     width: "toggle" });

    如果提供一个以+= 或 -=开始的值,那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的

    .animate({      left: '+=50px' }, "slow");

    duration时间

    动画执行的时间,持续时间是以毫秒为单位的;值越大表示动画执行的越慢,不是越快。还可以提供'fast' 和 'slow'字符串,分别表示持续时间为200 和 600毫秒。

    easing动画运动的算法

    jQuery库中默认调用 swing。如果需要其他的动画算法,请查找相关的插件

    complete回调

    动画完成时执行的函数,这个可以保证当前动画确定完成后发会触发

    具体可以参考右边的代码效果:


    查看全部
  • .fadeTo( duration, opacity ,callback)

    必需的 duration参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。可选的 callback 参数是该函数完成后所执行的函数名称。


    查看全部
  • fadeToggle切换fadeOut与fadeIn效果,所谓"切换",即如果元素当前是可见的,则将其隐藏(淡出);如果元素当前是隐藏的,则使其显示(淡入)。

    常用语法:.fadeToggle( [duration ] ,[ complete ] )

    可选的 duration 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是 fadeToggle完成后所执行的函数名称。


    查看全部
  • fadeOut()函数用于隐藏所有匹配的元素,并带有淡出的过渡动画效果

    所谓"淡出"隐藏的,元素是隐藏状态不对作任何改变,元素是可见的,则将其隐藏。

    .fadeOut( [duration ], [ complete ] )

    通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

    字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串,或者这个duration参数被省略,那么默认使用400毫秒的延时


    查看全部
  • 基本的操作:slideToggle();

    这是最基本的操作,获取元素的高度,使这个元素的高度发生改变,从而让元素里的内容往下或往上滑。

    提供参数:.slideToggle( [duration ] ,[ complete ] )

    同样的提供了时间、还有动画结束的回调。在参数对应的时间内,元素会完成动画,然后出发回调函数

    同时也提供了时间的快速定义,字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时

    slideToggle("fast") 
    slideToggle("slow")


    查看全部
  • .slideDown():用滑动动画显示一个匹配元素

    .slideDown()方法将给匹配元素的高度的动画,这会导致页面的下面部分滑下去,弥补了显示的方式

    常见的操作,提供一个动画是时间,然后传递一个回调,用于知道动画是什么时候结束

    .slideDown( [duration ] [, complete ] )

    持续时间(duration)是以毫秒为单位的,数值越大,动画越慢,不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串,或者这个duration参数被省略,那么默认使用400 毫秒的延时。

    具体使用:

    $("ele").slideDown(1000, function() {
        //等待动画执行1秒后,执行别的动作....
    });

    注意事项:

    • 下拉动画是从无到有,所以一开始元素是需要先隐藏起来的,可以设置display:none

    • 如 果提供回调函数参数,callback会在动画完成的时候调用。将不同的动画串联在一起按顺序排列执行是非常有用的。这个回调函数不设置任何参数,但是 this会设成将要执行动画的那个DOM元素,如果多个元素一起做动画效果,那么要非常注意,回调函数会在每一个元素执行完动画后都执行一次,而不是这组 动画整体才执行一次


    查看全部
  • 基本的操作:toggle();

    这是最基本的操作,处理元素显示或者隐藏,因为不带参数,所以没有动画。通过改变CSS的display属性,匹配的元素将被立即显示或隐藏,没有动画。

    • 如果元素是最初显示,它会被隐藏

    • 如果隐藏的,它会显示出来

    display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline,然后是隐藏和显示,这个元素将再次显示inline

    提供参数:.toggle( [duration ] [, complete ] )

    同样的提供了时间、还有动画结束的回调。在参数对应的时间内,元素会发生显示/隐藏的改变,在改变的过程中会把元素的高、宽、不透明度进行一系列动画效果。这个元素其实就是show与hide的方法

    直接定位:.toggle(display)

    直接提供一个参数,指定要改变的元素的最终效果

    其实就是确定是使用show还是hide方法

    if ( display === true ) {
      $( "elem" ).show();
    } else if ( display === false ) {
      $( "elem" ).hide();
    }


    查看全部
  • $('elem').hide(3000).show(3000)

    让元素执行3秒的隐藏动画,然后执行3秒的显示动画。

    show与hide方法是非常常用的,但是一般很少会基于这2个属性执行动画,大多情况下还是直接操作元素的显示与隐藏为主

    注意事项:

    • show与hide方法是修改的display属性,通过是visibility属性布局需要通过css方法单独设置

    • 如果使用!important在你的样式中,比如display: none !important,如果你希望.show()方法正常工作,必须使用.css('display', 'block !important')重写样式

    • 如果让show与hide成为一个动画,那么默认执行动画会改变元素的高度,高度,透明度


    查看全部
  • .hide( options )

    当提供hide方法一个参数时,.hide()就会成为一个动画方法。.hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作

    快捷参数:

    .hide("fast / slow")

    这是一个动画设置的快捷方式,'fast' 和 'slow' 分别代表200和600毫秒的延时,就是元素会执行200/600毫秒的动画后再隐藏


    查看全部
  • $("#a1").stop().hide(3000).show(3000)
    //stop() 用于避免动画执行过程中反复触发

    //语法结构
    $("#div").stop();//停止当前动画,继续下一个动画
    $("#div").stop(true);//清除元素的所有动画
    $("#div").stop(false, true);//让当前动画直接到达末状态 ,继续下一个动画
    $("#div").stop(true, true);//清除元素的所有动画,让当前动画直接到达末状态

    查看全部
  •  <h2>trim方法</h2>

        未处理
        <input type="text" name="" id="results1" value=" 前后留空 " />
        <input id="exec1" type="button" value="点击执行"> <br />
       
        trim处理
        <input type="text" name="" id="results2" value=" 前后留空 " />
        <input id="exec2" type="button" value="点击执行">
        <script type="text/javascript">
        $("#exec1").click(function() {
            alert("值的长度:" + $("#results1").val().length)
        });

        $("#exec2").click(function() {
             alert("值的长度:" + $.trim($("#results2").val()).length)
        });
        </script>

    查看全部

  • 语法:参数接受一个jQuery或者dom对象作为查找的条件

    .index()
    .index( selector )
    .index( element )
    • 如果不传递任何参数给 .index() 方法,则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置

    • 如果在一组元素上调用 .index() ,并且参数是一个DOM元素或jQuery对象, .index() 返回值就是传入的元素相对于原先集合的位置

    • 如果参数是一个选择器, .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素,则 .index() 返回 -1


    查看全部

    • 移除字符串开始和结尾处的所有换行符,空格(包括连续的空格)和制表符(tab)

    • 如果这些空白字符在字符串中间时,它们将被保留,不会被移除


    查看全部
    • .stop(); 停止当前动画,点击在暂停处继续开始

    • .stop(true); 如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。当调用.stop()的时候,队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行

    • .stop(true,true); 当前动画将停止,但该元素上的 CSS 属性会被立刻修改成动画的目标值

    查看全部

举报

0/150
提交
取消
课程须知
1、有HTML/CSS基础 2、有JavaScript基础
老师告诉你能学到什么?
1、jQuery的基础语法 2、jQuery当中的动画处理

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!