Click Event with fadeToggle() - what is wrong with my code?

Question

I created an interactive map of London using the <map> tag which has 15 <area> tags defined. Upon clicking on any of the 15 areas, the source of the map is replaced by another, according to the area which was clicked on. All the areas have an individual id and the source changes according to that id.

Clicking again on the area reverts the map image back to its original source.

The simplified HTML for this is a bit like so:

<IMG id="londonmap" SRC="images/londonmap.png" USEMAP="#london">
<map name="london">
<area id="dalston" href="#" shape="rect" coords="364,75,500,200"
      alt="Dalston Tube Stop" title="Dalston Area">
</map>

The jQuery I used for clicking and unclicking looks as follows:

$(document).ready(function()
{
    $('#dalston').click(function()
    {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
    });
 });

Everything up to here works just fine. Now, I thought it would be nice, for just a bit of an extra effect to have the changing images .fadeToggle() when clicked for a smoother transition and as such changed to code to this:

$(document).ready(function()
{
$('#dalston').click(function() {
    $('#londonmap').fadeToggle('slow', function()
    {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
    });
     });
 });

The problem now is that only half the code reacts as I expected - the original image fades out, but the second one never takes its place. I'm guessing it has something to do with the order in which the events happen, but being a bit of a noob in jQuery I can't really tell what's going wrong.

Any help would be much appreciated as this is the last thing stopping me from finishing the map!

Shomz · Accepted Answer · 2012-05-23T14:48:07.937

1

You never actually show the element back once it fades using the fadeToggle function. You need to show it back once the image has been swapped.

UPDATE

$(document).ready(function()
{
$('#dalston').click(function() {
    $('#londonmap').fadeOut('slow', function() {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
        $('#londonmap').fadeIn('slow');
        });
    });
});

Or chech the working example here.

edited May 23 '12 at 14:48

answered May 23 '12 at 14:28

Shomz

37,421
4
57
85

thanks for this! any chance you could tell me what the code is for that? – Casper F May 23 '12 at 14:33
1

Ok, see this: http://jsfiddle.net/934n7/1/ Of course, images are wrong size and everything, but it should work like you wanted to. – Shomz May 23 '12 at 14:44
-thanks a lot man, much appreciated! Works like magic. This is a bit on the side. but if you got the time it would help - if I wanted to delay the transition so that it wouldn't fade to white and then show the swapped image, would I use delay(); or setTimeout(); ? – Casper F May 23 '12 at 15:20
You're welcome! :) I think `delay()` would be a better option here... something like: `$('#londonmap').delay(2000).fadeIn('slow');` You can also use `setTimeout()` but it behaves differently and will give you more trouble in this example. – Shomz May 23 '12 at 19:24

score 0 · Answer 2 · answered May 23 '12 at 14:25

Try:

$(document).ready(function()
{
$('#dalston').click(function() {
    $('#londonmap').fadeToggle('slow', function()
    {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
        //show the image
        $('#londonmap').fadeToggle('slow');
    });
     });
 });

Hi @strah and thanks for the input! I tried this bit of code and now it seems to be doing the same thing and a short flicker at the end, but the second image still doesn't load... — Casper F, May 23 '12 at 14:31

score 0 · Answer 3 · answered May 23 '12 at 14:33

0

You haven't told it to reverse the toggle, try this

$(document).ready(function() {

    $('#dalston').click(function() {

        $('#londonmap').fadeToggle('slow', function() {

            // select the image and determine what the next src will be
            var newImageSrc = $(this).attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

            // re-bind the src attribute and fade back in
            $(this).attr('src', newImageSrc).fadeToggle('slow');
        });
    });
});

answered May 23 '12 at 14:33

trapper

11,716
7
38
82

Hi @trapper ! Just as with strah's code underneath, this seems to fade out the image, flicker a bit at the end, but won't load the second image. Shomz underneath was suggesting that this is because it's never actually shown after it's been swapped? – Casper F May 23 '12 at 14:37
Could you provide a test url or jsfiddle? – trapper May 23 '12 at 14:38
Sure, here it is: http://jsfiddle.net/ The clickable area is somewhere in the top right, made it quite big for demonstration purposes. – Casper F May 23 '12 at 14:40
Your link is missing above ^^ – trapper May 23 '12 at 14:47

Click Event with fadeToggle() - what is wrong with my code?

3 Answers3