如何使用动画移动跨度？

Posted 2023-02-22

【中文标题】如何使用动画移动跨度？

【英文标题】：How to move spans with an animation?

【发布时间】：2013-05-14 02:56:04

【问题描述】：

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

我的意思是，做我在this fiddle 中所做的事情（查看结果最好输入here），其中两个第一个跨度向右滑动动画，第三个跨度为淡入/淡出动画。

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

---

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

【问题讨论】：

你会使用 CSS3 吗？如果是这样，请使用 CSS 过渡。在这里阅读：developer.mozilla.org/en-US/docs/Web/Guide/CSS/…

【参考方案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/

【讨论】：

嘿！谢谢！很好的解决方案！但是当幻灯片动画完成时，我该如何淡入/淡出第三个跨度？恐怕现在它看起来太尖锐了......

这有点棘手。但在你的情况下，你可以尝试这样的jsfiddle.net/V6qGM/11

非常感谢！最后一件事：我正在尝试使用fadeIn() 函数而不是show()，但它不起作用……你知道为什么吗？ jsfiddle.net/V6qGM/21/embedded/result

可能与css动画有冲突。试试这个jsfiddle.net/V6qGM/22 但你必须处理对齐

第一个是margin，第二个是opacity