在 Jquery 滑块上淡化文本答案

【问题标题】：Fading Text On a Jquery Slider在 Jquery 滑块上淡化文本
【发布时间】：2011-07-12 17:34:54
【问题描述】：

我的问题是：我需要制作一个类似于 Flash 视频的 JQuery Image 滑块。到目前为止，我已经成功了，因为我有滑块，但我无法得到文本。我需要在图像显示后淡入文本，类似于此页面 http://absolutetileandstone.com/ 上的效果。我已经尝试了几乎所有我能想到的东西，包括 .animate() 和 .fadeIn() ，但一无所获。我什至将 2 个滑块加在一起并尝试同步时间，这是不可能的……有什么建议吗？

这是在滑块http://www.trileafweb.com/absolute 内有滑块的演示

【问题讨论】：

大多数 jQuery 滑块都有某种“过渡完成”回调。将fadeIn() 绑定到其中，定位您想要淡入的文本。

标签： jquery animation text slider

【解决方案1】：

嗯.. 重做滑块怎么样，因为插件本身不做文本淡入淡出。

演示：http://jsfiddle.net/LQgw4/

html

<div id="container">
    <div>
        <span class="one">absolute</span>
        <span class="two">hauuu~</span>
        <img src="http://lorempixum.com/250/200/abstract/1" />
    </div>
    <div>
        <span class="one">absolute</span>
        <span class="two">uguu~</span>
        <img src="http://lorempixum.com/250/200/abstract/2" />
    </div>
    <div>
        <span class="one">absolute</span>
        <span class="two">kyaa~</span>
        <img src="http://lorempixum.com/250/200/abstract/3" />
    </div>
    <div>
        <span class="one">blerg</span>
        <span class="two">abalone</span>
        <img src="http://lorempixum.com/250/200/abstract/4" />
    </div>
</div>

css

#container img,
#container span {
    display:none;   
}

#container span.one,
#container span.two {
    color:#fff;
    font:bold 30px verdana;
    position:absolute;
    left:30px;
    top:90px;
}

#container span.two {
    left:130px;
    top:120px;
    font-size:20px; 
}

jquery

$(document).ready(function() {
    startSlider(0);
});

function startSlider(idx) {
    $img = $("#container div img").eq(idx);
    $span1 = $("#container div span.one").eq(idx);
    $span2 = $("#container div span.two").eq(idx);

    $img.fadeIn('slow', function() {
        $span1.delay(600).fadeIn('slow', function() {
            $span2.delay(600).fadeIn('slow', function() {
                $span1.delay(600).fadeOut();
                $span2.delay(600).fadeOut('fast', function() {
                    $img.fadeOut('slow', function() {
                        if ($("#container div img").length - 1 == idx) {
                            startSlider(0);
                        }
                        else {
                            startSlider(idx + 1);
                        }
                    });
                });
            });
        });
    });
}

或者如果您希望第一个文本不淡出：http://jsfiddle.net/azzWZ/

【讨论】：