jQuery动画效果

1.

2.

3.

4.

5.

6.

7.

非常用 flas, 我们已经非常少看到这样的情况了,绝大部分已经使用 JavaScript 代 flash里 说的代替是网页特效部分,而不是动画。

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

显示、

jQuery .show().hide()仅仅显 示内容和隐藏内容。

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

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

});

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

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

});

.hide()置 CSdisplay:none; .show()原 来元素是区块还是内联来决定。假设是区块,则设置 CSdisplay:block; , 则设置 CSdisplay:inline;

.show().hide()毫秒(100于 )控 制速度。

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

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

$('#box').show(1000);                                      //了 

});

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

$('#box').hide(1000);                                        //了 

});

使jQuery slow

norma和 fast应 6040和 20

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

$('#box').show('fast');                                      //20

});

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

$('#box').hide('slow');                                       //60

});

。 那么它将採用默认值:40

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

$('#box').show('');                                            //认 40

});

//使.show().hide()

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

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

alert('

');

});

});

//使

$('.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();

});

 仅仅从 到 100从 10到 0没 有办法了。而 jQuery .fadeTo()

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

$('#box').fadeTo('slow', 0.33);                    //0.3为 33

});

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

自己定义

jQuery 使时候法 满足我们更加复杂的需求。这个时候,jQuery 一个.animate()

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

$('#box').animate({

'width' : '300px',

'height: '200px',

'fontSize' : '50px',

'opacity: 0.5

});

});

:一个 CS。上,已个 CS化,

仅仅对 CS

别 为速度和回调函数。

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

$('#box').animate({

'width' : '300px',

'height: '200px'

}, 1000, function () {

alert('

'); 

});

});

使合 CS

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

$('#box').animate({

'top: '300px',                                           //置 CS

'left' : '200px'

});

});

jQuery 

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

$('#box').animate({

'left' : '+=100px',

});

}); 

1.2.

//

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

$('#box').animate({'left' : '100px'});

$('#box').animate({'top' : '100px'});

$('#box').animate({'width' : '300px'});

});

//

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

$('#box').animate({

'left' : '100px'

}).animate({

'top: '100px'

}).animate({

'width' : '300px'

});

}); 

//

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

$('#box').animate({

'left' : '100px'

}, function () {

$('#box').animate({

'top: '100px'

}, function () {

$('#box').animate({

'width' : '300px' 

});

}); 

});

});

列队动

如 果是不同元素,能够使用回调函数。但有时列队动画太多,回调函数的可读性大大减少。为 此。jQuery 

//

$('#box').slideUp('slow').slideDown('slow').css('background', 'orange');

.css()始 传入列队之前。

那么,能够採用动画方法的回调函数来解决。

//使.css()队到.slideDown()

$('#box').slideUp('slow').slideDown('slow', function () {

$(this).css('background', 'orange');

});

下降清 晰。所以,我们的想法是每一个操作都是自己独立的方法。那么 jQuery 回 调函数的方法:.queue()

//使.queue()

$('#box').slideUp('slow').slideDown('slow').queue(function () {

$(this).css('background', 'orange');

}); 

.queue()。 这.queue()

问题jQuery .queue()以 传递一个參数。这个參数是 nex个 next()动 画

//使用 nex

$('#box').slideUp('slow').slideDown('slow').queue(function (next) {

$(this).css('background', 'orange');

next();

}).hide('slow');

 为 nex是 jQuery1.4 使.dequeue()。 意思为运行下一个元素列队中的函数。

//使.dequeue()

$('#box').slideUp('slow').slideDown('slow').queue(function () {

$(this).css('background', 'orange');

$(this).dequeue();

}).hide('slow');

使而 回调函数的嵌套就会杂乱无章。

//使

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

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

$('#box').queue(function () {

$(this).css('background', 'orange');

$(this).dequeue();

})

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

.queue()

在 普通 Web

//fx 

function count() {

return $("#box").queue('fx').length;

}

//

$('#box').slideDown('slow', function () {alert(count());});

jQuery .clearQueue()

函 数.queue()

//

$('#box').slideDown('slow', function () {$(this).clearQueue()});

动画相

非常jQuery .stop()可 选參数:.stop(clearQueue, gotoEnd)clearQueu尔值的 动画列队,gotoEn

//

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

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

});

//

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

$('#box').animate({

'left' : '300px'

}, 1000);

$('#box').animate({

'bottom' : '300px'

}, 1000);

$('#box').animate({

'width' : '300px'

}, 1000);

$('#box').animate({

'height: '300px'

}, 1000);

}); 

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

$('#box').stop(true ,true);

});

为 false

为 true动 画的时候。会取消后面的列队动画。第二參数表示是否到达当前动画结尾,默觉得 false。 如果參数为 true

 

jQuery 供了.delay()

//迟 迟 

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

$('#box').delay(1000).animate({

'left' : '300px'

}, 1000);

$('#box').animate({

'bottom' : '300px'

}, 1000);

$('#box').delay(1000).animate({

'width' : '300px'

}, 1000);

$('#box').animate({

'height: '300px'

}, 1000);

}); 

:animated前 运动的动画是哪个元素。通过这个特点,我们能够避免因为用户高速在某个元素运行动画时, 因为动画积累而导致的动画和用户的行为不一致。

//线

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

$(this).slideToggle('slow', arguments.callee);

});

//

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

$('div:animated').stop().css('background', 'red');

});

动画全

jQuery $.fx.interval帧数$.fx.off, 关闭页面上全部的动画。

$.fx.interval 为 1但 可能影响浏览器性能。

//为 100

$.fx.interval = 1000;                                                //为 13 

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

$('#box').toggle(3000);

});

$.fx.off 

而 jQuery 

//闭 true

$.fx.off = true;                                                        //为 false

.animate()法中easing 值 需要通过插件来使用。在后面的课程中。会具体解说。自带的參数有两个:swing()、 linear()swing

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

$('#box').animate({

left : '800px'

}, 'slow', 'swing');

$('#pox').animate({

left : '800px'

}, 'slow', 'linear');

});

转载于:https://www.cnblogs.com/zhchoutai/p/8275425.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值