Question

我无法解决这个问题。我认为这是我的负面余量，但即使没有它，它仍然会跳跃。

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

这是我的代码的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);

    });

});

感谢您的帮助！

Answer 1

在淡出当前幻灯片后，你应该在下一张幻灯片中淡出吧？那么你使用淡入功能做什么，使用回调：

$().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; }，以防止加载多个页面。

Answer 2

问题是，当你在某些时候淡化你的元素时，你会在页面上同时拥有这些元素，因此他们需要以某种方式定位自己。所以我的建议是立即隐藏第一个元素并fadeIn另一个元素。

Answer 3

将position:absolute添加到您的.selectedSubSlide和#productNav li选择器。

.selectedSubSlide {
    display: block;
    position:absolute;
}
#productNav li {
    display: none;
    position:absolute;
}

<强> jsFiddle example

jQuery导致元素跳转点击

3 个答案: