交叉淡入淡出疊置元件

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>