0

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

标记：

<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;
}
4

4 回答 4

0 
 $('.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>
于 2012-12-11T12:27:43.653 回答
0

您可以使用dataattr。

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

});

演示

于 2012-12-10T18:33:37.567 回答
0

这可能是您需要的 - 将所有横幅淡出，然后根据需要更改 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/

于 2012-12-10T18:34:52.020 回答
0

这是我的 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;
}

usingdata是去这里的方式，以便它是动态的。

于 2012-12-10T18:43:28.543 回答