0

だから私は3つの積み重ねられた要素を持っています、すなわち

マークアップ:

<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:

リンクごとに、対応する要素に切り替えてフェードしたい。ただし、これは奇妙な問題を引き起こし、3 番目の要素がフェード時に表示され続けます。これをより動的にするためのより良い方法もありますか?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

これが必要な場合があります。すべてのバナーをフェードアウトし、必要に応じて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;
}

使用することdataは、動的にするためにここに行く方法です。

于 2012-12-10T18:43:28.543 に答える
0

属性を使用できますdata。

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 
 $('.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 に答える