Question

我正在使用twitter-bootstrap框架，我有两个使用偏移类居中的span4。我正在做的是做一个动画去除偏移类并向右拉动跨度以在结尾放置另一个span4。

我的意思是，在this fiddle做我的工作（看结果最好进入here），右边两个第一个跨度的幻灯片动画和fadeIn / fadeOut annimation第三个跨度。

CSS

.span4 {
    background: red;
    text-align: center;
    height: 400px;
}
.hidden{
    display:none !important;
}

HTML

<div class="container">
    <div id="rowad" class="row-fluid">
        <div id="firstspan" class="span4 offset2">Hello
            <button class="btn" id="addspan">Add SPAN</button>
        </div>
        <div class="span4">Stack</div>
        <div id="spanhiden"class="span4 hidden">Stack</div>
    </div>
</div>

JS

$(document).ready(function () {
    $("#addspan").click(function () {
       var textb = $(this).text();

       if (textb == "Add SPAN"){
           $("#firstspan").removeClass("offset2");
           $("#spanhiden").removeClass("hidden");
           $(this).text("Remove SPAN");
       }else{
           $("#firstspan").addClass("offset2");
           $("#spanhiden").addClass("hidden");
           $(this).text("Add SPAN");
       }
    });
});

任何建议或帮助将不胜感激。如果你需要更多信息，请告诉我，我会编辑帖子。

Answer 1

试试这个，

.span4 {
    background: red;
    text-align: center;
    height: 400px;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

http://jsfiddle.net/V6qGM/10/

如何用动画移动跨度？

1 个答案: