Image change onclick using javascript is very fast?

Question

Html and Javascript code:

<img  src="imgs/right.gif" id="image_change" onclick="changeImage()"/>

<script>
    function changeImage() {
var src = document.getElementById("image_change").src;  
    var imgsrc = src.substring(src.lastIndexOf("/")+1);
    if  (imgsrc == "left.gif")
    {
        document.getElementById("image_change").src = "imgs/right.gif";
        alert('if'+document.getElementById("image_change").src);
    }
    else 
    {
        document.getElementById("image_change").src = "imgs/left.gif";
        alert('else'+document.getElementById("image_change").src);
    }

}
</script>

When i click on the image, a new image is replacing in fraction of milli seconds..can i make the replacing of the image slow by using javascript or by adding any css class to it??any help would be appreciated..

Answer 1

try this

Using javascript

   var op = 0.1;  // initial opacity
    element.style.display = 'block';
    var timer = setInterval(function () {
        if (op >= 1){
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.1;
        alert("here");
    }, 10);
    var img =document.getElementById("image_change");
    fade(img);// Chnage image in fade method

Using jquery

// increase the 500 to larger values to increase the duration 
// of the fadeout and/or fadein
$('#image_change').fadeOut(500, function () {
    $('#image_change').attr("src", "/newImage.png");
    $('#image_change').fadeIn(500);
});

Answer 2

The above jQuery way is straight forward and easy , if you want this in vanilla JavaScript you can use setTimeout with opacity to create fade out and fade in effect for further details check link below

Pure JavaScript fade in function

Answer 3

You can do it this way:

 function changeImage() { setTimeout(function() { var src = document.getElementById("image_change").src; if (src == "http://s25.postimg.org/iyly1k3uz/arrow_left.png") { document.getElementById("image_change").src = "http://s25.postimg.org/tzh36kw3v/arrow_right.png"; } else { document.getElementById("image_change").src = "http://s25.postimg.org/iyly1k3uz/arrow_left.png"; } }, 1000); } 

 body { background-color: lightblue; } 

 <img src="http://s25.postimg.org/tzh36kw3v/arrow_right.png" id="image_change" onclick="changeImage()" /> 

Answer 4

You can use setTimeout() function of window object to make delay for execution of your code.

Try this :

HTML :

<img src="http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg" id="image_change" onclick="changeImage();" />

javaScript :

function changeImage() {
    var src = document.getElementById("image_change").src;  
    var imgsrc = src.substring(src.lastIndexOf("/") + 1);
    if  (imgsrc == "Cartoon-6.jpg")
    {
        window.setTimeout(function(){
            document.getElementById("image_change").src = "http://topwallpaperswide.com/wp-content/uploads/cartoon-wallpapers-jerry-the-mouse-running-and-shouting-20140823213658-53f9097a18af8.jpg";
        //alert('if'+document.getElementById("image_change").src);
        }, 1000);
    }
    else 
    {
        window.setTimeout(function(){
            document.getElementById("image_change").src = "http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg";
        //alert('else'+document.getElementById("image_change").src);
        }, 1000);
    }

}

jsFiddle