jQuery导致元素在点击时跳转答案

【问题标题】：jQuery causing element to jump on clickjQuery导致元素在点击时跳转
【发布时间】：2014-03-14 22:00:05
【问题描述】：

我这辈子都想不通。我以为这是我的负边距，但即使没有它，它仍然在跳跃。

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

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

    });

});

感谢您的帮助！

【问题讨论】：

我只是想让它像我在我的 jQuery 中那样淡入淡出..而不是跳下来然后备份..

标签： jquery css

【解决方案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; } 来防止加载多个页面。

【讨论】：

非常感谢！天才=)

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

jsFiddle example

【讨论】：