堆叠元素之间的交叉淡入淡出

Question

所以我有三个堆叠的元素，即

标记：

<div id="banner-1" class="banner-background"></div>
<div id="banner-2" class="banner-background"></div>
<div id="banner-3" class="banner-background"></div>

<a class="menu-link banner-1-link">1</a>
<a class="menu-link banner-2-link">2</a>
<a class="menu-link banner-3-link">3</a>

jquery：

对于每个链接，我希望切换到相应的元素并在其间淡入淡出。然而，这导致了奇怪的问题，第三个元素一直在淡入淡出。有没有更好的方法让它更有动态性，所以如果我想添加4或5，它也可以吗？

    $('.menu-link').on('mouseenter', function(){
        var menuLink = $(this);

        if (menuLink.hasClass('banner-1-link')){
            $('#banner-1').animate({'opacity': 0}, 100, function (){
                $('#banner-1').css('z-index', '3');
            }).animate({'opacity': 1}, 600);
                $('#banner-2').css('z-index', '0');
                $('#banner-3').css('z-index', '0');
        }

        else if (menuLink.hasClass('banner-2-link')){
            $('#banner-2').animate({'opacity': 0}, 100, function (){
                $('#banner-2').css('z-index', '3');
            }).animate({'opacity': 1}, 600);
                $('#banner-3').css('z-index', '0');
                $('#banner-1').css('z-index', '0');
        }

        else {
            $('#banner-3').animate({'opacity': 0}, 100, function (){
                $('#banner-3').css('z-index', '3');
            }).animate({'opacity': 1}, 600);
                $('#banner-2').css('z-index', '0');
                $('#banner-1').css('z-index', '0');
        }
});

感谢您的帮助，谢谢！

编辑：

CSS：

.banner-background{
    width: 100%;
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
}

#banner-1{
    z-index: 3;
}

#banner-2{
    z-index: 0;
}

#banner-3{
    z-index: 0;
}

Answer 1

您可以使用data attr。

HTML

<div id="banner-1" class="banner-background"></div>
<div id="banner-2" class="banner-background"></div>
<div id="banner-3" class="banner-background"></div>

<a class="menu-link banner-1-link" data-banner="banner-1">1</a>
<a class="menu-link banner-2-link" data-banner="banner-2">2</a>
<a class="menu-link banner-3-link" data-banner="banner-3">3</a>

JS

$('.menu-link').on('mouseenter', function(){
    var $menuLink = $(this),
        $banner = $('#' + $menuLink.data('banner'));

    $banner.animate({'opacity': 1}, 100, function (){
        $(this).css('z-index', '3');
    });
    $('.banner-background').not($banner).css('z-index', '0');

});

Answer 2

这可能是您需要的--淡出所有横幅，然后根据需要更改z索引，然后再将它们全部淡入：

$('.menu-link').on('mouseenter', function() {
    var menuLink = $(this);
    $banners = $('#banner-1,#banner-2,#banner-3');

    $banners.stop().animate({'opacity':0},100, function() {
        $banners.css({'z-index':0});
        if (menuLink.hasClass('banner-1-link')) {
            $('#banner-1').css({'z-index':3});
        } else if (menuLink.hasClass('banner-2-link')) {
            $('#banner-2').css({'z-index':3});
        } else if (menuLink.hasClass('banner-3-link')) {
            $('#banner-3').css({'z-index':3});
        };
        $banners.animate({'opacity':1},600);
    });
});​

http://jsfiddle.net/mblase75/GbbVU/

Answer 3

这是我的jsfiddle：http://jsfiddle.net/Morlock0821/k4EkG/1/

html

<div class="banner" id="banner-1"></div>
<div class="banner" id="banner-2"></div>
<div class="banner" id="banner-3"></div>
<a data-banner="1" class="menu-link">1</a>
<a data-banner="2" class="menu-link">2</a>
<a data-banner="3" class="menu-link">3</a>​

js

$('.menu-link').on('mouseenter', function(){
    var menuLink = $(this),
        banner = menuLink.data('banner');

    $('.banner').not(this).animate({'opacity': 0}, 100);
    $('#banner-' + banner).animate({'opacity': 1}, 600);

});​

css

.banner {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:40px;
}
#banner-1 {
    background-color:blue;
}
#banner-2 {
    background-color:red;
    opacity:0;
}
#banner-3 {
    background-color:green;
    opacity:0;
}

在这里使用data是为了使它成为动态的。