自定义 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});

});

问题在于，即使第一项 (item-3) 可见，文本也是不可选择的，但它下面的图层是可选的。尝试单击我设置的此测试页面上内容区域中的链接：

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

Answer 1

首先，您似乎要添加和删除样式表中不存在的名为“可见”的类。

接下来，您在隐藏时将不透明度设置为 0，但这不会使元素消失。最上面的元素仍然是接收点击事件的元素，即使它的不透明度为 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('visible') 和 removeClass('visible') 出现的任何地方删除它。

这将首先将每个滑块元素设置为 display:none（当然，第一个除外）。然后在淡出一个元素时，在动画结束时有一个回调设置 display:none。

在元素中淡入淡出时，需要在动画前设置 display:block ，并将 opacity 设置为 0 仍然可以得到淡入淡出效果。