自定义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，这样您仍然可以获得淡入效果。