Question

I have a jQuery function where certain divs fade in and out, I cant paste my entire file into a jsFiddle as its too large and all image links are relative, I have the following however…

// On click hide default, Country specific
    $('.default .asia').click(function(){
        $('.default').fadeOut("fast");
        $(".default").queue(function () {
            $('.viewport-asia').fadeIn("fast");
            $('.viewport-asia').dequeue();
        });         
    });
    $('.default .north-america').click(function(){
        $('.default').fadeOut("fast");
        $(".default").queue(function () {
            $('.viewport-america').fadeIn("fast");
            $('.viewport-america').dequeue();
        });
    });
    $('.default .europe').click(function(){
        $('.default').fadeOut("fast");
        $(".default").queue(function () {
            $('.viewport-europe').fadeIn("fast");
            $('.viewport-europe').dequeue();
        });
    });

    // Drag event
    $(".america-big").draggable();
    $(".europe-big").draggable();
    $(".asia-big").draggable();

    // Reset map
    $('a.zoom-out').click(function(){
        $('.hidden').fadeOut("fast");
        $(".hidden").queue(function () {
            $('.default').fadeIn("fast");
            $('.hidden').dequeue();
        }); 
    })
}); 

The last function // Reset Map “a.zoom-out” should fade out the current div and fade in the .default div, its currently fading out the current div but the default div isn’t fading back in?

Can anybody see where im going wrong?

---

HTML

<div class="map">

    <!-- // Default Map -->
    <div class="default">
        <div class="asia"><img src="map/asia.png" alt="Asia"></div>
        <div class="north-america"><img src="map/north-america.jpg" alt="America"></div>
        <div class="europe"><img src="map/europe.jpg" alt="Europe"></div>
    </div>

    <!-- // Animated Map // North America -->
    <div class="viewport-america hidden">
        <div class="compass">
            <a href="#" class="arrow top">Top</a>
            <a href="#" class="arrow right">Right</a>
            <a href="#" class="arrow bottom">Bottom</a>
            <a href="#" class="arrow left">Left</a>
        </div>
        <a href="#" class="zoom-out">Zoom Out</a>
        <div class="instructions"><img src="map/instructions.png" alt="Instructions"></div>
        <div class="america-big"><img src="http://placekitten.com/1989/996" alt="America" /></div>
    </div>

    <!-- // Animated Map // Europe -->
    <div class="viewport-europe hidden">
        <div class="compass">
            <a href="#" class="arrow top">Top</a>
            <a href="#" class="arrow right">Right</a>
            <a href="#" class="arrow bottom">Bottom</a>
            <a href="#" class="arrow left">Left</a>
        </div>
        <a href="#" class="zoom-out">Zoom Out</a>
        <div class="instructions"><img src="map/instructions.png" alt="Instructions"></div>
        <div class="europe-big"><img src="http://placekitten.com/2000/1000" alt="Europe" /></div>
    </div>

    <!-- // Animated Map // Asia -->
    <div class="viewport-asia hidden">
        <div class="compass">
            <a href="#" class="arrow top">Top</a>
            <a href="#" class="arrow right">Right</a>
            <a href="#" class="arrow bottom">Bottom</a>
            <a href="#" class="arrow left">Left</a>
        </div>
        <a href="#" class="zoom-out">Zoom Out</a>
        <div class="instructions"><img src="map/instructions.png" alt="Instructions"></div>
        <div class="asia-big"><img src="http://placekitten.com/1999/999" alt="Asia" /></div>
    </div>

</div>

Answer 1

You do not need the queue function.

If you want the fadeIn and fadeOut at the same time:

$('.default .asia').click(function(){
    $('.default').fadeOut("fast");
    $('.viewport-asia').fadeIn("fast");
});

If you want the fadeOut first and after it finishes the fadeIn:

$('.default .asia').click(function(){
    $('.default').fadeOut("fast", function(){
        $('.viewport-asia').fadeIn("fast");
    });
});