javascript - 使用 javascript 的图像更改 onclick 非常快？

Question

HTML 和 Javascript 代码:

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

当我单击图像时，新图像将在几分之一毫秒内替换。我可以通过使用 javascript 或向其添加任何 css 类来降低图像的替换速度吗？如有任何帮助，我们将不胜感激。 .

Answer 1

试试这个

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

使用 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);
});