Flexslider jQuery 插件，延迟显示标题答案

【问题标题】：Flexslider jQuery Plugin, delay showing the captionFlexslider jQuery 插件，延迟显示标题
【发布时间】：2013-02-20 22:52:33
【问题描述】：

我正在使用 Flexslider (http://www.woothemes.com/flexslider/) 插件进行幻灯片放映，并且希望字幕在出现之前延迟。

我已经用初始化代码做到了这一点，

 $(window).load(function() {
              $('.flexslider').flexslider({slideshow:false});

            });

$('.slide1caption').css("display","none");
$('.slide1caption').slideUp(300).delay(800).fadeIn(400);

每次有新幻灯片进来时，我只需要重置标题部分。提前致谢。

【问题讨论】：

标签： jquery

【解决方案1】：

您可能想要更接近他们在高级使用示例中的代码：

$(window).load(function() {
    $('.flexslider').flexslider({
      animation: "slide",
      controlsContainer: ".flex-container",
      after: function(slider) {
         // animate your caption ... 
         // find the item that is the current slide's .slidecaption and animate it
         $('.current-slide').find('.slidecaption').slideUp(300).delay(800).fadeIn(400);
      }
    });
});

请记住，您需要在每张幻灯片中设置足够长的延迟，以便在下一张幻灯片开始之前完成字幕动画！

【讨论】：

谢谢你，这让我朝着正确的方向前进，这就是我想出的。 $('.slide1caption').css({ opacity: 0 }).delay(600).animate({opacity: 1, bottom: 50}); $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlsContainer: ".flex-container", before: function(slider) { $('.flex- active-slide').find('.slide1caption').css({ opacity: 0, bottom: -50 }); }, after: function(slider) { $('.flex-active-slide').find ('.slide1caption').delay(400).animate({opacity: 1,bottom: '50'});} });