1

我有两个主要元素 - 一些文本在一行上有一个选择框，一个 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;
}

​</p>

4

1 回答 1

2

你可以在这里看到它的工作原理：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;
}
​
于 2012-11-10T17:01:25.913 回答