Search jQuery

jQuery Forum

two rotating images fade onclick

in Using jQuery • 12 years ago

I have a total of two images. The first image, when click needs to fade into the second image. Then when the second image is clicked it needs to fade back into the first image. This should go on as long the user wishes to click.

Here is my code so far. The first image fade works fine, but I can't get it to fade back to the first image again after loading the second image.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<img src="rolled-up.png" id="picture" class="up" />
<script type="text/javascript">
$(".up").click(function() {
$(".up").fadeOut("fast",function(){
$("#picture").load(function () { //avoiding blinking, wait until loaded
$("#picture").fadeIn();
});
$("#picture").attr("src","rolled-down.png");
$("#picture").attr("class","down");
});
});
$(".down").click(function() {
$(".down").fadeOut("fast",function(){
$("#picture").load(function () { //avoiding blinking, wait until loaded
$("#picture").fadeIn();
});
$("#picture").attr("src","rolled-up.png");
$("#picture").attr("class","up");
});
});
</script>
</body>
</html>

Any idea on how to fully implement this?

Thanks in advance.

Replies(3)

sime.vidas

Re: two rotating images fade onclick

12 years ago

<img id="picture" src="first.png" data-othersrc="second.png">

$(document).ready(function() {
      $("#picture").load(function() {
            $(this).fadeIn();
      }).click(function() {
            $(this).fadeOut("fast", function() {
                  var temp = this.src;
                  this.src = this["data-othersrc"];
                  this["data-othersrc"] = temp;
            });
      });
});

--
Šime Vidas
http://www.w3viewer.com

kussner

Re: two rotating images fade onclick

12 years ago

thanks sime.vidas

that almost worked, but it was changing the source to "undefined". I changed the code a little, and I doubt this is the correct way to do it, but it worked:

$(document).ready(function() {

$("#picture").load(function() {

$(this).fadeIn();

}).click(function() {

$(this).fadeOut("fast", function() {

var temp = this.src;

this.src = this.alt;

this.alt = temp;

});

sime.vidas

Re: two rotating images fade onclick

12 years ago

Yea, you can use the alt attribute, that should be OK.

But, I tested my code and it worked, so I am curious why it didn't work for you....

--
Šime Vidas
http://www.w3viewer.com

Top Reply

Response title

Attachments

jQuery Forum

two rotating images fade onclick

Replies(3)

Re: two rotating images fade onclick

Re: two rotating images fade onclick

Re: two rotating images fade onclick

Statistics

Tags

Actions