Wordpress 和 flexslider 中的 jQuery SlideToggle 标题问题

Question

我正在使用 Flexslider for Wordpress，并希望在 Flexslider 幻灯片放映中滑动切换每个图像的标题。

以下是幻灯片示例: http://lifescienceaurora.com/news/cu-anschutz/cu-anschutz-news/ranking-file/

点击左上角的“加号”。

问题是这样的:单击“+”两次以显示和隐藏当前图像的标题后，下一张幻灯片显示其标题。

我需要隐藏所有标题，直到单击切换按钮。

这是我的代码:(我已更新它以反射(reflect)“flexslider 的渲染代码”)

jQuery.noConflict();

jQuery(文档).ready(函数($){

    $('.flex-caption').hide();
    $('.flexslider').append('+');

    $('.flexslider按钮').click(function(){
        $('.flex-caption').slideToggle('慢');
    });
});

这里是 HTML 的示例

    

     

     

      

      

 
此处为标题 1
 +

      

      

 
此处为标题2
 +

      

      

 
这里是标题3
 +

      

      

 
此处为标题4
 +

      

     
     

    

我对 jQuery 的理解仅来自示例，因此我没有工具来解决此问题。

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

尝试使用 .stop() 或 .stop(1) 清除之前的动画队列:

$('span.wp-caption-text').stop(1).slideToggle('slow');

与您的问题相关的尝试:

$('.wp-caption button').click(function(){
    $('span.wp-caption-text').is(':visible').hide(); // hide all already visible captions
    $('span.wp-caption-text').stop(1).slideToggle('slow');
});