jquery - jQuery导致元素在点击时跳转

我无法一生解决这个问题。我以为这是我的负利润，但即使没有它，它仍然在跳跃。

http://jsfiddle.net/U3yrb/1/

只需单击顶部的列表项之一，您就会明白我的意思。 = /

这是我的CSS代码：

#productNav {
    position: relative;
    list-style: none;
    z-index: 200;
    padding-bottom: 20px;
}
.selectedSubSlide {
    display: block;
}
#productNav li {
    display: none;
}

但是我觉得CSS不值得指责。 jQuery有什么用吗？

$().ready(function() {

    $('#productNavReference li').click(function() {

        var selectedSlide = $(this).attr('rel');

        $('#productNav li[rel="'+selectedSlide+'"]').fadeIn(500, function() {
            $('#productNav li').removeClass('selectedSubSlide');
            $(this).addClass('selectedSubSlide');
        });

        $('.selectedSubSlide').fadeOut(500);

    });

});

谢谢你的帮助！

最佳答案

淡出当前幻灯片后，您应该在下一张幻灯片中消失，对吗？使用淡入功能，执行以下操作：

$().ready(function() {

    $('#productNavReference li').click(function() {

        var selectedSlide = $(this).attr('rel');

        $('.selectedSubSlide').fadeOut(500, function() {
            $('#productNav li[rel="'+selectedSlide+'"]').fadeIn(500, function() {
                $('#productNav li').removeClass('selectedSubSlide');
                $(this).addClass('selectedSubSlide');
            });
        });

    });

});

更新的小提琴：http://jsfiddle.net/U3yrb/6/

您可以在点击事件处理程序的顶部使用if($('#productNav li:animated').length) { return false; }来防止加载多个页面。