javascript - jQuery fadeIn 实际上并没有淡入

Question

我有一个 jQuery 函数，其中某些 div 淡入和淡出，我无法将整个文件粘贴到 jsFiddle 中，因为它太大而且所有图像链接都是相对的，但是我有以下...

// 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();
        }); 
    })
}); 

最后一个函数//Reset Map "a.zoom-out"应该淡出当前 div 并淡入 .default div，它当前淡出当前 div 但默认 div 没有淡入？

谁能看出我哪里出错了？

---

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

您不需要 queue 函数。

如果您同时需要 fadeIn 和 fadeOut:

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

如果你想先 fadeOut 并且在它完成 fadeIn 之后:

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