jQuery动画效果

jQuery动画效果

1.显示动画

无参数,让指定的元素显现出来,底层通过display:block实现

  $("div").show();

通过控制元素的宽高,透明度,display属性,逐渐显示,例如3秒后显示完毕

 $('div').show(3000);

参数

slow 慢:600ms

normal 正常 400ms

fast 快:200ms

动画执行完毕后立即执行回调函数

  //show(毫秒值，回调函数;    $("div").show(5000,function () {        alert("动画执行完毕！");    );

2.隐藏动画

    $(selector).hide(); ​    $(selector).hide(1000);  ​    $(selector).hide("slow"); ​    $(selector).hide(1000, function(){});

3.开关式显示隐藏动画

 $('#box').toggle(3000,function(){});

显示和隐藏的拉回切换采用的是toggle()方法,就是先执行show(),再执行hide()

    $('#btn').click(function(){            $('#box').toggle(3000,function(){                $(this).text('盒子出来了');                    if ($('#btn').text()=='隐藏') {                    $('#btn').text('显示');                    }else{                    $('#btn').text('隐藏');                    }            });        })

4.滑入和滑出

滑入,下拉动画,显示元素

 $(selector).slideDown(speed, 回调函数);

滑出,上拉动画,隐藏元素

 $(selector).slideUp(speed, 回调函数);

滑入滑出动画效果切换

 $(selector).slideToggle(speed, 回调函数);

5.淡入淡出效果

淡入动画效果,

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

淡出动画效果

 $(selector).fadeOut(1000);

淡入淡出动画效果来回切换

  $(selector).fadeToggle('fast', callback);

6.自定义动画

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

作用:执行一组CSS属性的自定义动画

第一个参数:要执行动画的CSS属性(必选)

第二个参数:执行动画的时长:可选

第三个动画:动画执行完毕后,立即执行的回调函数(可选)

7.停止动画

 $(selector).stop(true, false);

参数说明

第一个参数:true表示后续动画不执行,false表示后续动画执行

第二个参数:true表示立即执行完成当前动画,false表示立即停止当前动画

如果参数都不写,默认两个参数都是false,实际常用的是stop(),

转载于:https://www.cnblogs.com/W-Y-C/p/11377267.html