自定義jQuery滑塊上的奇怪行爲

Question

我認爲用jQuery創建自己的自定義內容滑塊很容易，並且設法創建一個體面的滑塊。在滑塊包裝器中，我有一個滑塊內容和滑塊列表。滑塊僅顯示三個內容區域中的一個。

這是滑塊的HTML：

<div id="featured_wrapper"> 

    <ul id="featured_content"> 

     <li class="item" id="item-3"> 
      <h1>Title item 3</h1> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
     </li> 

     <li class="item" id="item-2"> 
      <h1>Title item 2</h1> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
     </li> 

     <li class="item" id="item-1"> 
      <h1>Title item 1</h1> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
     </li> 

    </ul><!--/featured_content--> 

    <ul id="featured_list"> 

     <li class="item-link" id="item-link-3"> 
      <div class="item-container"> 
       <h2>Title item 3</h2> 
      </div> 
     </li> 

     <li class="item-link" id="item-link-2"> 
      <div class="item-container"> 
       <h2>Title item 2</h2> 
      </div> 
     </li> 

     <li class="item-link" id="item-link-1"> 
      <div class="item-container"> 
       <h2>Title item 1</h2> 
      </div> 
     </li> 

    </ul><!--/featured_list--> 

</div><!--/featured_wrapper--> 

#featured_content是內容div，並且#featured_list是列表div。

這是CSS：

#featured_wrapper { background: transparent url('/Files/System/web/gfx/featured_content_item_bg.jpg') repeat-x top left; overflow: hidden; } 
#featured_content { float: left; height: 390px; width: 622px; background: transparent url('/Files/System/web/gfx/featured_content_item_bg.jpg') repeat-x top left; position: relative; } 
#featured_content li { position: absolute; display: block; width: 622px; height: 390px; } 
#featured_list { float: right; height: 390px; width: 338px; background: transparent url('/Files/System/web/gfx/featured_content_list_bg.png') repeat-y 0 -260px; } 
.item-link { height: 70px; padding: 30px 20px 30px 45px; cursor: pointer; } 
.item-link h2 { font-weight: bold; font-size: 16px; line-height: 1; } 

這裏是jQuery代碼：

var bgpos = new Array(); 
    bgpos[0] = -260; 
    bgpos[1] = -130; 
    bgpos[2] = 0; 
$('#featured_content .item:not(:first-child)').css({'opacity': 0, 'margin-top': -20}); 
$('#featured_content .item:first-child').addClass('visible'); 
$('#featured_list .item-link').click(function(){ 

    var item = $(this).attr('id').split('-'); 
    var item_index = $(this).index(); 
    var item_id = 'item-' + item[2]; 

    /* 
    $('#featured_content .item:not(#' + item_id + ')').fadeOut('fast'); 
    $('#featured_content #' + item_id).fadeIn('fast'); 
    */ 

    $('#featured_content .item:not(#' + item_id + ')').animate({ 
     marginTop: -20, 
     opacity: 0 
    }, 200).addClass('visible'); 

    $('#featured_content #' + item_id).animate({ 
     marginTop: 0, 
     opacity: 1 
    }, 200).removeClass('visible'); 

    $('#featured_list').stop().animate({'backgroundPosition': '(0 ' + bgpos[item_index] + 'px)'}, {duration: 200}); 

}); 

的問題是，即使第一個項目（項目-3）是可見的，文本ISN不可選擇，但它下面的圖層是。嘗試一下這個測試頁面上的內容區域中的鏈接我已經設置了：

http://dev.drumroll.no/jquery-slider-fail/

Answer 1

首先，你似乎是添加和刪除一個名爲「可見的」一類，沒有在你的風格存在片。

接下來，隱藏時將不透明度設置爲0，但不會使元素消失。無論元素在上面仍然會是一個接收click事件，即使其不透明度爲0

走這條線的代碼...

$('#featured_content .item:not(:first-child)').css({'opacity': 0, 'margin-top': -20}); 

，並設置不透明度爲.20，而不是零。你會看到問題。

這裏有一個解決方案：

你的代碼更改爲以下：

$('#featured_content .item:not(:first-child)').css({'opacity': 0, display:'none', 'margin-top': -20}); 
$('#featured_content .item:not(#' + item_id + ')').animate({ 
        marginTop: -20, 
        opacity: 0 
       }, 200, function(){$(this).css({display:'none'});}); 

$('#featured_content #' + item_id).css({display:'block',opacity:0}) 
            .animate({ 
        marginTop: 0, 
        opacity: 1 
       }, 200); 

此外，刪除addClass（ '可見的'）和removeClass（ '可見'）凡出現。

這將最初設置每個滑塊元素顯示：無（當然，除了第一個）。然後，當淡出某個元素時，動畫結束處會有一個回調來設置display：none。

淡入淡出在元素中，您需要在動畫之前設置display：block，並將不透明度設置爲0，這樣您仍然可以獲得淡入效果。