Simple javascript swap and fade in/out

问题

I am looking for a javascript solution to simply make my SWAP action fade in and out rather than just appearing.

Id like to strictly stick to some javascript instead of using jquery or any plugins.

Heres the code that swaps the images on user click, just looking for a way to make them fade in and out:

<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>

EDIT: I have seen and tried many different javascript options, but I cannot figure out how to put it together with the current javascript I am using above. Including:

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()}

回答1:

You could use CSS transition/animations to do a lot of the heavy lifting for you. The code snippet below works on Chrome and Firefox 4.0 beta. On IE, there's no fade. One day it will just work on IE.

In the sample below, I host two images absolutely positioned within the same div. For the child images, I specify a 1 second fade on opacity changes. The swap function just sets the src on the image that isn't visible and toggles the opacity between 0 and 1.0 for each image. One fades id on top of the other fading out.

Now, when you try this, you may notice the first swap doesn't reliably fade. That's because I didn't wait for the "onload" event on the image to occur before changing opacity. Better to keep opacity at 0.0, then set the src attribute. Then on the onload callback, toggle the opacity.

<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>

回答2:

The quick and dirty:

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

}

This should work in all recent browser. You can adjust quality/speed with the 'inc' and 'timeout' variables. Please note that it's better to use a simple animation framework (it doesn't have to be the heavy jQuery) instead of this, if you want to use many animations on your website.

My example may result in performance issues, if used too often/parallel on one website. You might also want to outsource my 'fadein' and 'fadeout' snippets to its own functions, if you want to use it more than once (don't be a copy&paste programmer). :)

来源：https://stackoverflow.com/questions/4909672/simple-javascript-swap-and-fade-in-out

标签

javascript

fadein

fadeout