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');

});

demo

Answer 2

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

$('.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是这里的方式，以使其成为动态。

Answer 4

 $('.menu-link').on('mouseenter', function(){


                      var $menuLink = $(this);
                      var $banner = $('#' + $menuLink.data('banner'));

                        $banner.css('opacity', 0);
                        $banner.parent().append($banner);

                        // fade in relevant banner
                        $banner.animate({'opacity': 0}, 100, function (){
                        }).animate({'opacity': 1}, 600);
    });

我需要添加图片。因此，我们拍摄每张图像，并将其附加到父容器中。

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

<li><a href="#" class="active menu-link" data-banner="banner-1">Latest collection</a></li>
<li><a href="#" class="menu-link" data-banner="banner-2">Must have collection</a></li>
<li><a href="#" class="menu-link" data-banner="banner-3">Coming soon</a></li>

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

4 个答案: