那么隐藏再显示时,4.自定义动画

时间:2020-03-14 19:17来源:澳门美高梅游戏
现在在页面中使用动画效果来提高用户体验,已经很常用了,最近弄了一个项目也运用了不少的动画效果,拿其中一个来说下吧。使用jQuery使用Animate和scrollTop实现页面滑动效果,以往常

现在在页面中使用动画效果来提高用户体验,已经很常用了,最近弄了一个项目也运用了不少的动画效果,拿其中一个来说下吧。使用jQuery使用Animate和scrollTop实现页面滑动效果,以往常用的写法是:

学习要点:

一、hide()、show()、toggle()

$.animate({

1.显示、隐藏

//1.hide():在HTML文档中,为一个元素调用hide()方法会将该元素的display

scrollTop:'0px','fast',function;

2.滑动、卷动

//样式改为none,代码功能同css("display","none")。当提供hide方法一个参数时,.hide()就会成为一个动画方法。.hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作。

jQuery在做hide操作的时候,是会保存本身的元素的原始属性值,再之后通过对应的方法还原的时候还是初始值。比如一个元素的display属性值为inline,那么隐藏再显示时,这个元素将再次显示inline。一旦透明度达到0,display样式属性将被设置为none,这个元素将不再在页面中影响布局

前几天在写页面滑动插件的时候,需要在animate后执行回调。如下:

3.淡入、淡出

//2.show():将元素的display样式改为先前的显示状态

$.animate({

4.自定义动画

//hide() 和 show() 可以接收两个参数

scrollTop:'0px','fast',function(){

5.列队动画方法

//第一个 动画的时间(可以是具体的数值,也可以是'fast' 和 'slow',分别代表200和600毫秒的延时)

//这里的代码执行了两次

6.动画相关方法

//第二个 动画完成的回调函数

//以上两个方法在不带任何参数的情况下,作用是立即隐藏或显示匹配的元素,不会有任何动画,

//可以通过制定速度参数使元素动起来

//以上两个方法会同时减少(增大)内容的高度、宽度和不透明度。

$('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成为一个动画,那么默认执行动画会改变元素的高度,高度,透明度

$.trigger;}

7.动画全局属性

//3.toggle():切换元素的可见状态,如果元素是可见的,则切换为隐藏,如果元素是隐藏的,则切换为可见的

show与hide是一对互斥的方法。需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法。比如显示的元素,那么就要调用hide,反之亦然。对于这样的操作行为,jQuery提供了一个便捷方法toggle用于切换显示或隐藏匹配元素

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

//这种写法两个方法会依次被执行,也可以单个使用额

$(document).on("click", function() {

$("#box").hide(2000,function(){

         $("#box").css({

               left:300,

              top:300,

        })

});

$("#box").show(2000,function(){

alert("亲亲的,我来了")

});

//这两个参数可以根据需要决定是否添加

})

//两个方法同时存在但是分开执行的方法,需要bol值判断

// var bol = true;

//点击文档,切换box的出现和消失

$(document).on("click", function() {

if (bol) {

$("#box").hide(500, function() {

alert("隐藏了");

});

bol = false;

} else {

$("#box").show(500, function() {

alert("出现了");

});

bol = true;

}

});


于是发现,回调内执行了两次。之前一直都没注意到这个问题。

在以前非常长一段时间里,网页上的各种特效还需要採用 flash 在进行。但最近几年里, 我们已经非常少看到这样的情况了,绝大部分已经使用 JavaScript 动画效果来取代 flash。这里 说的代替是网页特效部分,而不是动画。

二、fadeIn()、fadeOut()、fadeTo()、fadeToggle()

其原因主要是使用了$ 作为animate的dom,这样做的目的是为了兼容各浏览器。

网页特效比方:渐变菜单、渐进显示、图片轮播等; 而动画比方:故事情节广告、MV  等等。

/*fadeIn(),fadeOut():只改变元素的透明度,fadeOut()会在指定的一段时间内

webkit 内核的浏览器使用body 进行滑动,而其他浏览器则使用html进行滑动。

一.显示、隐藏

* 降低元素的不透明度,直到元素完全消失,函数用于隐藏所有匹配的元素,并带有淡出的过渡动画效果.所谓"淡出"隐藏的,元素是隐藏状态不对作任何改变,元素是可见的,则将其隐藏。所有匹配的元素的高度和宽度不会发生变化。

这里偷懒的使用了$,虽然解决了兼容性问题,但是却导致animate回调两次的问题。因此该方案并不完美。

jQuery 中显示方法为:.show()。隐藏方法为:.hide()。在无參数的时候。仅仅是硬性的显 示内容和隐藏内容。

* fadeIn()则相反,用于显示所有匹配的元素,并带有淡入的过渡动画效果

于是,可以做下判断,解决兼容性及回调问题:

$('.show').click(function () {                                    //显示

淡入的动画原理:操作元素的不透明度从0%逐渐增加到100%。

如果元素本身是可见的,不对其作任何改变。如果元素是隐藏的,则使其可见

$($.browser.webkit?"body":"html").animate({

$('#box').show();

* fadeTo()把不透明度以渐近的方式调整到指定的值(0-1之间)

scrollTop:'0px','fast',function(){

});

* 三个参数,执行时间(时间可以填数值,也可以天单词"slow"和"fast") 不透明度目标值 完成之后的回调函数

$.trigger;

$('.hide').click(function () {                                      //隐藏

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

在jquery 1.9版本后,已经不支持$.browser.webkit的方法进行浏览器类型检测了,需要的话,自己通过ua判断下即可。

$('#box').hide();

* fadeToggle()切换fadeIn(),fadeOut(),通过透明度来切换元素的可见性.

所谓"切换",即如果元素当前是可见的,则将其隐藏(淡出);如果元素当前是隐藏的,则使其显示(淡入)。

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

var bol = true;

$(document).on("click", function() {

// if (bol) {

// //不透明度变为0

// $("#box").fadeOut(1000, function() {

// console.log("消失了");

// })

// } else {

// //不透明度变为设置的不透明度

// $("#box").fadeIn(1000, function() {

// console.log("显示了");

// })

// }

// bol = !bol;

//三个参数

//执行时间 不透明度目标值 完成之后的回调函数

// $("#box").fadeTo(1000, 0.2, function() {

// alert("变化完成");

// })

//切换 out 和 in

$("#box").fadeToggle(1000);

})


});

三、slideDown()、slideUp()、slideToggle()

.slideDown():用滑动动画显示一个匹配元素澳门美高梅游戏

.slideDown()方法将给匹配元素的高度的动画,这会导致页面的下面部分滑下去,弥补了显示的方式.下拉动画是从无到有,所以一开始元素是需要先隐藏起来的,可以设置display:none

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

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

注意:.hide()方法其实就是在行内设置 CSS 代码:display:none; 而.show()方法要根据原 来元素是区块还是内联来决定。假设是区块,则设置 CSS 代码:display:block; 如果是内联, 则设置 CSS 代码:display:inline;。

/*slideDown(),slideUp():只会改变元素的高度。如果一个元素的display属性为

在.show()和.hide()方法可以传递一个參数,这个參数以毫秒(1000 毫秒等于 1 秒钟)来控 制速度。

* none,当调用slideDown()方法时,这个元素将由上至下延伸显示。slideUp()方法

而且里面富含了匀速变大变小,以及透明度变换。

* 正好相反,元素由下至上缩短隐藏

这个使用的含义就是:找到元素的高度,然后采用一个下滑动画让元素一直滑到隐藏,当高度为0的时候,也就是不可见的时,修改元素display 样式属性被设置为none。这样就能确保这个元素不会影响页面布局了

因为动画是异步的,所以要在动画之后执行某些操作就必须要写到回调函数里面,这里要特别注意

$('.show').click(function () {

* slideToggle():通过高度变化来切换匹配元素的可见性,也可以给定事件和回调函数

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

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

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

display属性值保存在jQuery的数据缓存中,所以display可以方便以后可以恢复到其初始值.当一个隐藏动画后,高度值达到0的时候,display 样式属性被设置为none,以确保该元素不再影响页面布局

// $(document).on("click", function() {

// console.log("哈哈");

//slideDown() 从无到有,从上往下的出现

//slideUp()从有到无,从下往上的消失

// $("#box").slideUp(1000, function() {

// alert("a");

// });

// });

// var bol = true;

// $(document).on("click", function() {

// if(bol) {

// $("#box").slideUp(1000, function() {

// alert("a");

// });

// } else {

// $("#box").slideDown(1000, function() {

// alert("b");

// });

// }

// bol = !bol;

// })

$(document).on("click", function() {

$("#box").slideToggle();

});


$('#box').show(1000);                                      //显示用了 1 秒

四、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);

});

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

$('.hide').click(function () {

.animate({

$('#box').hide(1000);                                        //隐藏用了 1 秒

     left: '+=50px'

});

}, "slow");

除了直接使用毫秒来控制速度外。jQuery 还提供了三种预设速度參数字符串:slow、

// 在现有高度的基础上增加100px

normal 和 fast。分别对应 600 毫秒、400 毫秒和 200 毫秒。

$aaron.animate({

$('.show').click(function () {

     width  : "+=100px",

$('#box').show('fast');                                      //200 毫秒

     height : "+=100px",

});

});

$('.hide').click(function () {

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

$('#box').hide('slow');                                       //600 毫秒

.animate({

});

     width: "toggle",//改变宽,从宽上面改变

注意:不管是传递毫秒数还是传递预设字符串,如果不小心传递错误或者传递空字符串。 那么它将採用默认值:400 毫秒。

});

$('.show').click(function () {

$("#box").animate({

$('#box').show('');                                            //默认 400 毫秒

    height:"toggle",//改变高,从高上面改变

});

},3000)

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

easing动画运动的算法

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

**complete回调
**

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


//使用.show()和.hide()的回调函数,可以实现列队动画效果。

参数

$('.show').click(function () {

duration - 设置动画执行的时间

$('#box').show('slow', function () {

easing - 规定要使用的 easing 函数,过渡使用哪种缓动函数

alert('动画持续完毕后。执行我!

step:规定每个动画的每一步完成之后要执行的函数

');

progress:每一次动画调用的时候会执行这个回调,就是一个进度的概念

});

complete:动画完成回调

如果多个元素执行动画,回调将在每个匹配的元素上执行一次,不是作为整个动画执行一次

});

//列队动画。使用函数名调用自身

$('.show').click(function () {

$('div').first().show('fast', function showSpan() {

$(this).next().show('fast', showSpan);

});

});

//列队动画。使用 arguments.callee 匿名函数自调用

$('.hide').click(function () {

$('div').last().hide('fast', function() {

$(this).prev().hide('fast', arguments.callee);

});

});

我们在使用.show()和.hide()的时候,如果需要一个按钮切换操作。需要进行一些条件判

断。而 jQuery 提供给我们一个类似功能的独立方法:.toggle()。

$('.toggle').click(function () {

$(this).toggle('slow');

});

二.滑动、卷动

jQuery 提供了一组改变元素高度的方法:.slideUp()、.slideDown()和.slideToggle()。顾名 思义,向上收缩(卷动)和向下展开(滑动)。

$('.down').click(function () {

$('#box').slideDown();

});

$('.up').click(function () {

$('#box').slideUp();

});

$('.toggle').click(function () {

$('#box').slideToggle();

});

注意:滑动、卷动效果和显示、隐藏效果一样,具有相同的參数。 三.淡入、淡出

jQuery 提供了一组专门用于透明度变化的方法:.fadeIn()和.fadeOut(),分别表示淡入、

淡出,当然还有一个自动切换的方法:.fadeToggle()。

$('.in').click(function () {

$('#box').fadeIn('slow');

});

$('.out').click(function () {

$('#box').fadeOut('slow');

});

$('.toggle').click(function () {

$('#box').fadeToggle();

});

 上面三个透明度方法仅仅能是从 0 到 100,或者从 100 到 0。如果我们想设置指定值就没 有办法了。而 jQuery 为了解决这个问题提供了.fadeTo()方法。

$('.toggle').click(function () {

$('#box').fadeTo('slow', 0.33);                    //0.33 表示值为 33

});

注意:淡入、淡出效果和显示、隐藏效果一样,具有相同的參数。

对于.fadeTo()方法。 如果本身透明度大于指定值,会淡出,否则相反。

四.自己定义动画

jQuery 提供了几种简单常用的固定动画方面我们使用。但有些时候。这些简单动画无法 满足我们更加复杂的需求。这个时候,jQuery 提供了一个.animate()方法来创建我们的自定

义动画,满足更多复杂多变的要求。

$('.animate').click(function () {

编辑:澳门美高梅游戏 本文来源:那么隐藏再显示时,4.自定义动画

关键词: