Jquery 动画|等待第一个动画仍在运行
我试图创建自己的幻灯片供个人使用,但我遇到了一个问题 在我的jQuery插件中,我创建了一个操作我的插件的对象。代码的结构如下所示:Jquery 动画|等待第一个动画仍在运行,jquery,animation,jquery-animate,Jquery,Animation,Jquery Animate,我试图创建自己的幻灯片供个人使用,但我遇到了一个问题 在我的jQuery插件中,我创建了一个操作我的插件的对象。代码的结构如下所示: ( function($) { $.fn.wplSlider = function(options) { var slider = this; var settings = $.extend( {
(
function($)
{
$.fn.wplSlider = function(options)
{
var slider = this;
var settings = $.extend(
{
'animationSpeed' : 750,
'animationEasing' : null,
'animationAutoStart': true,
'pauseTime' : 3500
},
options
);
var methods = {
animationRun : false,
totalSlides : 0,
init : function()
{
// This method initiating the slide show elements
},
slidesStatus : function()
{
// This method initiating the slides status
},
slideNumber : function()
{
// Assign a number to each slide
},
getSlidesAmount : function()
{
// Get the amount of slides
},
next : function()
{
// Prepare the next slide that will be displayed
},
prev : function()
{
// Prepare the next slide that will be displayed
},
goTo : function(item)
{
// Prepare the specified slide
},
slideOut : function()
{
// Slide out the current slide
slider.find('li[data-status="current"] .container').animate(
{
top : '-75px'
},
600
);
slider.find('li[data-status="current"] span, li[data-status="current"] a').animate(
{
opacity : 0
},
600
);
},
slideIn : function()
{
// Slide in the current slide
$('li[data-status="current"]').animate(
{
'opacity' : 1
},
650
);
}
}
/* Allow chainability */
return this.each(
function()
{
methods.init();
methods.slideOut();
methods.next();
methods.slideIn();
}
);
}
}
)(jQuery);
使用上面的代码,问题在于,当我执行slideOut/next/slideIn时,步骤非常快
更具体地说,slideIn()与slideOut()同时执行
是否有办法使slideIn()仅在slideOut()完成后执行
有没有办法使slideIn()只在
滑出()是否已完成
是的,您可以使用下面的代码
下面的代码将允许您运行slideIn()函数,该函数将在slideOut()函数执行后执行
$.when(methods.slideOut())
.then(methods.slideIn());
如果您想深入了解一些知识:这是可行的,因为像slideIn这样的方法实现了延迟的“接口”。见本参考资料: