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

Question

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

即使这是大型企业应用程序的一部分（因此事件处理等在这里不是真正的问题）。但我想，只要某些事件发生时（如点击按钮）来做到这一点：

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; 
} 
​