jQuery循环插件滑动延迟直到onBefore完成

发布于 2024-12-20 21:24:03 字数 443 浏览 1 评论 0原文

我已经尝试了我能想到的一切，但我似乎无法延迟 jQuery Cycle 插件的滑动，直到 onBefore 中的动画完成之后。我尝试过将delay()和setTimeout()与cycle('toggle')一起使用。有人知道如何延迟下一张幻灯片直到 onBefore 中的所有内容完成吗？

$('#feature').cycle({ 
  fx:     'scrollLeft', 
  easing: 'easeOutExpo', 
  speed: 1000,  
  timeout: 3000,
  before:  onBefore
});

function onBefore(curr, next, opts, forwardFlag) { 
  $(curr).children("div").animate({  left : '960px' }, 300, function() {  });
}

原文

I have tried about everything I can think of but I can't seem to delay the slide of the jQuery Cycle plugin until after animations in my onBefore are finished. I've tried using delay() and setTimeout() with cycle('toggle'). Anyone have any ideas on how to delay the next slide until everything in onBefore is finished?

$('#feature').cycle({ 
  fx:     'scrollLeft', 
  easing: 'easeOutExpo', 
  speed: 1000,  
  timeout: 3000,
  before:  onBefore
});

function onBefore(curr, next, opts, forwardFlag) { 
  $(curr).children("div").animate({  left : '960px' }, 300, function() {  });
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

故乡的云 2024-12-27 21:24:04

似乎没有办法延迟幻灯片过渡直到onBefore完成。作为解决办法，我能够通过以下方式完成我需要的操作：基本上描述在当前幻灯片的 onAfter 中的下一张幻灯片转换之前会发生什么。

/* 手动描述第一张动画 */

$('#feature .featureStory:first').children("a").delay(4500).animate({marginTop:'100'}, 500);

/* 传递循环调用 'after' 和 'skipInitializationCallbacks' */

$('#feature').cycle({ 
  fx: 'scrollLeft', 
  easing: "easeOutExpo",
  speed: 1000,
  timeout: 6000,
  after: onAfter,
  skipInitializationCallbacks: true
});

/* 在当前幻灯片的 onAfter 中为下一张幻灯片执行所有动画 */

function onAfter(curr, next, opts, ff) {
  $(next).children(".featureStory").animate({left:'560px'}, 500, function(){ 
    $(this).children("a").animate({marginTop:'0'}, 500);
    $(this).children("a").delay(3500).animate({marginTop:'100'}, 500);
    $(next).children(".featureStory").delay(4500).animate({  left : '960px' }, 500); 
  });
}

现在我确信在没有完整上下文的情况下这确实很令人困惑，但它应该让您了解如何通过使用上一张幻灯片的 onAfter 和一些延迟来让事情在幻灯片转换之前执行动画适当的时间。

It seems that there is no way to delay the slide transition until the onBefore is completed. As a work around I was able to do what I needed with the following by essentially describing what would happen before the next slide transitioned in the onAfter of the current slide.

/* Manually describe the animation for the first one */

$('#feature .featureStory:first').children("a").delay(4500).animate({marginTop:'100'}, 500);

/* Pass the cycle call the 'after' and 'skipInitializationCallbacks' */

$('#feature').cycle({ 
  fx: 'scrollLeft', 
  easing: "easeOutExpo",
  speed: 1000,
  timeout: 6000,
  after: onAfter,
  skipInitializationCallbacks: true
});

/* Do all of your animations for the next slide in the on onAfter of the current slide */

function onAfter(curr, next, opts, ff) {
  $(next).children(".featureStory").animate({left:'560px'}, 500, function(){ 
    $(this).children("a").animate({marginTop:'0'}, 500);
    $(this).children("a").delay(3500).animate({marginTop:'100'}, 500);
    $(next).children(".featureStory").delay(4500).animate({  left : '960px' }, 500); 
  });
}

Now I'm sure that's really quite confusing without the full context, but it should give you an idea of how to have things animate before a slide transition by using the onAfter of the previous slide and some delays to get things to execute at the appropriate time.

回复收藏 0 原文

~没有更多了~