简单的javascript交换和淡入/淡出答案

【问题标题】：Simple javascript swap and fade in/out简单的javascript交换和淡入/淡出
【发布时间】：2011-02-05 21:10:42
【问题描述】：

我正在寻找一种 javascript 解决方案来简单地使我的 SWAP 操作淡入淡出，而不仅仅是出现。

我喜欢严格坚持使用一些 javascript 而不是使用 jquery 或任何插件。

这是在用户点击时交换图像的代码，只是在寻找一种让它们淡入淡出的方法：

<script type="text/javascript">
// Image Swap //
function swap(image) {
document.getElementById("main").src = image.href;

}
</script>
<body>
<img id="main" src="image1.png" width="250">
<br>
<a href="image1.png"  onclick="swap(this); return false;"><img width="50" src="/image1.png"></a>
<a href="image2.png" onclick="swap(this); return false;"><img width="50" src="image2.png"></a>f
<a href="image3.png" onclick="swap(this); return false;"><img width="50" src="image3.png"></a>
</body>

编辑： 我已经看到并尝试了许多不同的 javascript 选项，但我无法弄清楚如何将它与我上面使用的当前 javascript 放在一起。其中：

document.write("<style type='text/css'>#main {visibility:hidden;}</style>");

function initImage() {
imageId = 'main';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = "visible";
fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}

【问题讨论】：

标签： javascript fadein fadeout

【解决方案1】：

又快又脏：

function swap (image) {

    var inc = 0.1; // Increment / Decrement
    var timeout = 100;

    var fadeout = window.setInterval ( function () {
        var e = document.getElementById("main");
        var o = parseFloat( e.style.opacity );
        if ( o <= 0 )
            window.clearInterval ( fadeout );
        else
            o = o - inc;
        e.style.opacity = o;
    }, timeout );

    document.getElementById("main").src = image.href;

    var fadein = window.setInterval ( function () {
        var e = document.getElementById("main");
        var o = parseFloat( e.style.opacity );
        if ( o >= 1 )
            window.clearInterval ( fadein );
        else
            o = o + inc;
        e.style.opacity = o;
    }, timeout );

}

这应该适用于所有最近的浏览器。您可以使用“inc”和“timeout”变量调整质量/速度。请注意，如果您想在您的网站上使用许多动画，最好使用一个简单的动画框架（它不必是沉重的 jQuery）而不是这个。

如果在一个网站上过于频繁/并行使用，我的示例可能会导致性能问题。如果您想多次使用它，您可能还想将我的 'fadein' 和 'fadeout' sn-ps 外包给它自己的功能（不要成为复制粘贴程序员）。 :)

【讨论】：

【解决方案2】：

您可以使用 CSS 过渡/动画为您完成很多繁重的工作。下面的代码 sn-p 适用于 Chrome 和 Firefox 4.0 beta。在 IE 上，没有淡入淡出。有一天它会在 IE 上运行。

在下面的示例中，我托管了两个绝对位于同一个 div 中的图像。对于子图像，我在不透明度更改时指定 1 秒淡入淡出。交换函数只是在不可见的图像上设置 src，并将每个图像的不透明度在 0 和 1.0 之间切换。一个淡出 id 在另一个淡出之上。

现在，当您尝试此操作时，您可能会注意到第一次交换不会可靠地消失。那是因为在更改不透明度之前，我没有等待图像上的“onload”事件发生。最好将不透明度保持在 0.0，然后设置 src 属性。然后在 onload 回调中，切换不透明度。

<head>
    <style>


div#imghost
{
    position:relative;
    height: 100px;
    width: 100px;   
}

div#imghost img
{
 position: absolute;
 left: 0px;
 top: 0px;
 opacity: 0.0;
 -moz-transition-property: opacity;
 -moz-transition-duration: 1s;
 -webkit-transition-property: opacity;
 -webkit-transition-duration: 1s;
  transition-property: opacity;
 transition-duration: 1s;
}

    </style>

    <script type="text/javascript">
    // Image Swap //
        var img1_is_visible = false;

        function swap(img) {
            var img1 = document.getElementById("img1");
            var img2 = document.getElementById("img2");
            var imgold= img1_is_visible ? img1 : img2;
            var imgnew= img1_is_visible ? img2 : img1;

            imgnew.style.opacity = 1.0;
            imgnew.src = img.src;
            imgold.style.opacity = 0.0;
            img1_is_visible = !img1_is_visible
        }

    </script>
</head>

    <body>
     <div class="imghost">
         <img id="img1" />
         <img id="img2" />
     </div>

    <br/>
        <img width="50" src="image1.png" onclick="swap('this');">
        <img width="50" src="image2.png" onclick="swap('this');">
        <img width="50" src="image3.png" onclick="swap('this');">
    </body>

【讨论】：