幻灯片更改时的jQuery循环触发事件不在之前或之后答案

【问题标题】：jquery cycle trigger event on slide change not before or after幻灯片更改时的jQuery循环触发事件不在之前或之后
【发布时间】：2014-02-07 10:18:53
【问题描述】：

我正在使用 jquery cycle1 插件制作幻灯片，在图像之间进行淡入淡出过渡，没有上一个或下一个控件。我需要在此滑块上叠加文本，该滑块会根据幻灯片显示的内容更改颜色。

我对 jQuery 不是很流利，所以我很难使用文档来操作可用的选项。感谢this post 和this one，我已经走到了这一步，但显然，颜色会在之前或之后略有变化，具体取决于我使用之前还是之后。如何在幻灯片同时更改文本颜色？

注意：我必须使用cycle 1 插件，因为我的网站使用的是jQuery 1.3.2，没有升级的希望。

这里是fiddle，代码如下。提前感谢您的帮助！

这是我的 html：

                    <div id="text">this is some text over the slider</div>
        <div id="switch-it">
            <div id="slide1">
                <a href="link1.html">
                    <img src="hp_hero_010114_01.jpg" height="500" width="980"  border="0" />
                </a>
            </div>
            <div id="slide2">
                <a href="link2.html">
                    <img src="hp_hero_010114_02.jpg" height="500" width="980" border="0"/>
                </a>
            </div>
        </div><!--//END switch-it-->

这里是 jQuery

        $(document).ready(function(){
            $('#switch-it').after('<div id="switch" class="switch">').cycle({
            fx:     'fade',
            speed:  800,
            timeout: 500,
            cleartypeNoBg: true,
            height:'500px', 
            width:'980px',
            pager:'#switch', 
            pause:1,
            before: function (prev, current, opts) {
                   var current_id = $(current).attr('id');
                    if( current_id.match("slide1")){
                        $('#text').css('color','white');
                    }
                    else if( current_id.match("slide2")){
                        $('#text').css('color','red');
                    }       
                    else if( current_id.match("slide3")){
                        $('#text').css('color','blue');
                    }                       
                    else if( current_id.match("slide4")){
                        $('#text').css('color','green');
                    }
            },
            pagerAnchorBuilder: function(index, el) {
                return '<a href="#">&bull;</a>'; // whatever markup you want
            }
            });

        });

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

这不是很优雅，但是在之前的一半速度中添加超时会使更改正好在转换的中间。

setTimeout(function () { ...change text color }, 400);

JSFiddle

编辑或

在与您的速度相同的时间内为#text 添加过渡到您的CSS

#text {transition: color .8s linear}

JSFiddle

【讨论】：

谢谢，看来可以！当图像从最后一张幻灯片返回到第一张时，时间已经关闭......我会玩它，但如果你有任何建议，我很乐意听到。
@surfbird0713 检查我的编辑。如果您不必担心 IE9 之前的浏览器，CSS 转换实际上会更容易。
@surfbird0713 或两者的组合JSFiddle

【解决方案2】：

您可能想要更新到 Cycle2 插件，它有您正在寻找的东西

link

在“misc. bits”中查找名为“busy”的状态变量；

【讨论】：

谢谢，但我坚持使用 jQuery 1.3.2。更新了我的问题以指定