0

我正在使用 twitter-bootstrap 框架，并且我有两个 span4 以偏移类为中心。我想要做的是做一个动画来删除偏移类并将跨度拉到右边以在最后放置另一个 span4。

我的意思是，做我在这个小提琴中所做的事情（查看结果最好在此处输入），使用右侧两个第一个跨度的幻灯片动画和第三个跨度的淡入/淡出动画。

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");
       }
    });
});

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

4

1 回答 1

2

试试这个，

.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/

于 2013-05-19T12:18:04.133 回答