javascript - 使用 JQuery 将 bootstrap 中的行 col 替换为另一行并淡入淡出

Question

我在 bootstrap 中有一行包含列，但我想在 10 秒内将其隐藏并用另一行带有淡入淡出的列替换它。

我的 html 代码是:

<div class="row">       
    <div class="sponsorsimg" id="foo">
        <div class="col-xs-6 col-md-4  col-sm-4  col-lg-2">
            <a href="#" title="">
                <img src="images/c1.jpg" class="img-responsive" alt="c1" />
            </a>
        </div>
        <div class="col-xs-6 col-md-4  col-sm-4  col-lg-2">
            <a href="#" title="">
                <img src="images/c2.jpg" class="img-responsive" alt="c2" />
            </a>
        </div>
        <div class="col-xs-6 col-md-4  col-sm-4  col-lg-2">
            <a href="#" title="">
                <img src="images/c3.jpg" class="img-responsive" alt="c3" />
            </a>
        </div>

        <div class="col-xs-6 col-md-4  col-sm-4  col-lg-2">
            <a href="#" title="">
                <img src="images/c4.jpg" class="img-responsive" alt="c4" />
            </a>
        </div>
        <div class="col-xs-6 col-md-4  col-sm-4  col-lg-2">
            <a href="#" title="">
                <img src="images/c5.jpg" class="img-responsive" alt="c5" />
            </a>
        </div>
        <div class="col-xs-6 col-md-4  col-sm-4  col-lg-2">
            <a href="#" title="">
                <img src="images/c6.jpg" class="img-responsive" alt="c6" />
            </a>
        </div>
    </div>
</div>

我想在 10 秒内将 (fade) 替换为:

<div class="row">     
    <div class="sponsorsimg" id="foo2" style="display: none;"">
        <div class="col-xs-6 col-md-4  col-sm-4  col-lg-2">
            <a href="#" title="">
                <img src="images/c2.jpg" class="img-responsive" alt="c1" />
            </a>
        </div>
        <div class="col-xs-6 col-md-4  col-sm-4  col-lg-2">
            <a href="#" title="">
                <img src="images/c5.jpg" class="img-responsive" alt="c2" />
            </a>
        </div>
        <div class="col-xs-6 col-md-4  col-sm-4  col-lg-2">
            <a href="#" title="">
                <img src="images/c3.jpg" class="img-responsive" alt="c3" />
            </a>
        </div>
        <div class="col-xs-6 col-md-4  col-sm-4  col-lg-2">
            <a href="#" title="">
                <img src="images/c1.jpg" class="img-responsive" alt="c4" />
            </a>
        </div>
        <div class="col-xs-6 col-md-4  col-sm-4  col-lg-2">
            <a href="#" title="">
                <img src="images/c3.jpg" class="img-responsive" alt="c5" />
            </a>
        </div>
        <div class="col-xs-6 col-md-4  col-sm-4  col-lg-2">
            <a href="#" title="">
                <img src="images/c6.jpg" class="img-responsive" alt="c6" />
            </a>
        </div>
    </div>
</div>

谢谢。

Answer 1

Here's the JSFiddle for this.我建议使用一段代码淡入淡出图像，而不是所有 HTML。这段代码在 Bootstrap 的 collapse 类上放置了一个 CSS 转换，当切换该类时，通过将 opacity 设置为 1，图像淡入。

使用这个 HTML:

<div>
    <img class="togglingimage twosecondfade" src="http://i.imgur.com/mIi9fAs.jpg"/>
    <img class="togglingimage twosecondfade" src="http://i.imgur.com/LLh5tTS.jpg"/>
    <img class="togglingimage twosecondfade collapse" src="http://i.imgur.com/4x1yqLu.jpg"/>
    <img class="togglingimage twosecondfade collapse" src="http://i.imgur.com/v6ydmmQ.jpg"/>
</div>

使用这个 Javascript:

var timeUntilTransition = 1000;

function toggleRows() {
    $(".togglingimage").toggleClass("collapse");
}

window.setTimeout(function () {
    toggleRows();
}, timeUntilTransition);

还有这个 CSS:

@import url('http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css');
.twosecondfade
{
    -webkit-transition: opacity 2.00s linear;
    -moz-transition: opacity 2.00s linear;
    -o-transition: opacity 2.00s linear;
    transition: opacity 2.00s linear;
}
.togglingimage.collapse
{
    opacity: 0;
}