javascript - 如何将隐藏的元素移动到另一个元素上并平滑地淡入？

Question

我有两个主要元素 - 一些文本在一行上有一个选择框，一个 div 在另一行上有一个 gif 微调器图像。最初，我将微调器设置为显示:无。

即使这是更大的企业应用程序的一部分(因此事件处理等在这里并不是真正的问题)。但是每当发生某些事件(即单击按钮)时我想做的是:

1. 隐藏的微调器元素移动以保证文本+选择框完全覆盖该行，而不会使该行整体变大 - 理想情况下它应该刚好适合文本+选择框覆盖的确切空间
2. 平滑地淡入微调器并将背景元素淡出至 100% 白色

http://jsfiddle.net/Dh4vb/15/
代码:

<div id="wrapper">
    on the <select id="select"></select> of the Month
<div id="spinner"></div>
</div>​

#wrapper {
    margin: 50px;
}

#spinner {
    width: 150px;
    height: 25px;
    background-image: url('http://fedoraproject.org/w/uploads/2/29/Artwork_DesignService_fedora-spinner.gif');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center; 

    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    display:none;
}

Answer 1

你可以在这里看到它的工作:http://jsfiddle.net/jfriend00/8MJH4/ .我在演示中延长了过渡时间，以便您可以更清楚地看到过渡工作。这是一个稍微更高级的版本，用作切换:http://jsfiddle.net/jfriend00/kwr4m/ .

想法是您将微调器定位在绝对位置(因此它在文本的顶部)，但最初 opacity: 0 所以不可见。然后，将文本的不透明度更改为 0，将微调器的不透明度更改为 1，并且都设置为不透明度 CSS 过渡。这是代码:

JS:

function run() {
    var spinner = document.getElementById("spinner");
    var fadeText = document.getElementById("fadeText"); 

    // make spinner visible
    spinner.style.opacity = 1;

    // make text not visible
    fadeText.style.opacity = 0;
}​

HTML:

<button id="go" onclick="run()">Go</button>
<div id="wrapper">
    <div id="fadeText" class="fadeTransition">
    on the <select id="select"></select> of the Month
    </div>
    <div id="spinner" class="fadeTransition"></div>
</div>​

CSS:

#wrapper {
    margin: 50px;
    position: relative;
}

#spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0;
    width: 150px;
    height: 25px;
    background-image: url('http://fedoraproject.org/w/uploads/2/29/Artwork_DesignService_fedora-spinner.gif');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center; 
}

.fadeTransition {
    -webkit-transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
    transition: opacity 2s ease-in-out;
}
​