Can't fade in an image loaded with jquery

35 Views Asked by Ed S. At 09 October 2023 at 23:44

I'm a novice at jQuery and I don't understand why the image displays, but it doesn't fade in as the jQuery documentation suggests.

<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>slide show test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<img id="image" alt="slide" style="opacity:0.5;"/>
<script>
var x="tiananmen-square-600.webp";
$("#image").attr('src', x, function() {
        $("#image").fadeIn( "slow");
        });
</script>
</body>
</html>

Help, please.

Original Q&A

There are 2 best solutions below

Phil On 10 October 2023 at 00:57

.attr() doesn't accept a 3rd parameter.

I think you want something like this

const x = "https://picsum.photos/200/300";

const image = $("#image").hide().attr("src", x);

image[0].decode().then(() => {
  image.fadeIn("slow");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="image" />

That is

Select the #image element
Initially hide it
Set it's src attribute
Wait for the image data to become available (see decode())
Fade it in

Ed S. On 10 October 2023 at 01:19

I got it to work by removing the opaque styling in the img tag and replacing the jQuery code with this:

$("#image").fadeOut(0);
$("#image").attr('src', x);
$("#image").fadeIn("slow");

Can't fade in an image loaded with jquery

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in IMAGE

Related Questions in FADEIN

Trending Questions

Popular # Hahtags

Popular Questions