[英]jQuery animation queue with common easing
I have jQuery animations which queued up for a single element: 我有jQuery动画,排队等候一个元素:
var el = $('.elem');
el.animate({
width: 120
},
600,
'easeInOutQuint'
).animate({
width: 90
},
300,
'easeInOutQuint'
).animate({
width: 100
},
100,
'easeInOutQuint'
);
The 3 animation counts as 1 main animation, just chained. 3动画算作1个主动画,只是链接。 It takes 1000ms to run and I would like to use in my example for the first animation the first 60% of the easing, then the easing next 30% used in the second animation and it finished with the last 10% of the easing.
运行需要1000毫秒,我想在我的例子中使用第一个动画的前60%的缓动,然后在第二个动画中使用缓和的下一个30%,它完成了最后10%的缓动。
Is there any way to make the easing as a global value for these queued animations? 有没有办法让缓和作为这些排队动画的全局值?
If I understand your question correctly, maybe you can wrap the logic in a function so you can pass in the duration and reuse the chained animation like this: 如果我正确理解你的问题,也许你可以将逻辑包装在一个函数中,这样你就可以传入持续时间并重用链式动画,如下所示:
var el = $('.elem');
var ease = function(elem, duration) {
elem
.animate({width: 120}, 0.6 * duration, 'easeInOutQuint')
.animate({width: 90}, 0.3 * duration, 'easeInOutQuint')
.animate({width: 100}, 0.1 * duration, 'easeInOutQuint');
}
ease(el, 1000);
Another method to make it as plugin. 另一种使其成为插件的方法。 With Fiddle
随着小提琴
(function ( $ ) {
$.fn.ease = function( options ) {
var settings = $.extend({
// These are the defaults.
style: "swing",
duration : 1000
}, options );
return this.each(function(){
$(this)
.animate({width: 120}, 0.6 * settings.duration, settings.style)
.animate({width: 90}, 0.3 * settings.duration, settings.style)
.animate({width: 100}, 0.1 * settings.duration, settings.style);
});
};
}( jQuery ));
usage html : <span>This is test line to to work on animate plugin ease</span>
js : $(document).ready(function(){ $('span').ease() });
用法html:
<span>This is test line to to work on animate plugin ease</span>
js: $(document).ready(function(){ $('span').ease() });
can give inputs too as $(element).ease({duration:2000});
也可以输入
$(element).ease({duration:2000});
The simplest way to do this is keep it nested like:
$( "#clickme" ).click(function() {
$( "#book" ).animate({
width: "140px"
}, 5000, "", function() {
$( "#note" ).animate({
width: "100px"
}, 4000, "", function() {
$("#note2").animate({
width: "60px"
}, 2000, "", function() {
})
})
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.