jQuery .hide() --向左滑动元素

Question

我要把我的导航定位到页面的顶部。我正在使用Bootstrap (仅CSS)。我使用jQuery隐藏一个徽标(img类.logo)，并在滚动条上显示另一个徽标(img类.logo-sm)。

一切基本正常，除了一件事。隐藏功能将主徽标滑动到左边，因为它会逐渐消失，但我希望它能够向上滑动。我很确定这不是.hide()函数的默认行为，但我不太了解jQuery，所以我不知道如何更改它。

我构建了一个JSFiddle来演示这种行为。由于某些原因，它不能一致地工作(它是本地的)，但是您可以在第一次向下滚动时看到徽标向左滑动。

JSFiddle

剧本：

$(document).ready(function() {
// nav fixing
$(window).scroll(function() {
    if ($(this).scrollTop() > 1){
        $(".logo").hide(100);
        $(".logo-sm").show(200);
    } else {
        $(".logo").show(100);
        $(".logo-sm").hide(200);
    }
});
});

Answer 1

$.hide()只将元素的display设置为none。它不动。这种行为可能是由CSS中的转换引起的。

如果要用jQuery动画元素，可以使用.slideUp()和.slideDown()。

$(document).ready(function() {
    // nav fixing
    $(window).scroll(function() {
        if ($(this).scrollTop() > 1){
            $(".logo").slideUp(100);
            $(".logo-sm").slideDown(200);
        } else {
            $(".logo").slideUp(100);
            $(".logo-sm").slideDown(200);
        }
    });
});

但是你的小提琴里还有其他的东西，会引起一些奇怪的事情，所以效果不会更好。我建议不要使用jQuery动画，而是使用它来更改元素上的类，并使用CSS转换处理动画。就像这样：

$(document).ready(function() {
    // nav fixing
    $(window).scroll(function() {
        if ($(this).scrollTop() > 1){
            $(".logo").removeClass("showing");
            $(".logo-sm").addClass("showing");
        } else {
            $(".logo-sm").removeClass("showing");
            $(".logo").addClass("showing");
        }
    });
});

然后使用转换对.showing类进行样式设置。

Answer 2

之所以会出现这种情况，是因为当您需要的是显示:块时，.show()正在应用display:内联块。

要解决这个问题，您需要找到将头.logo css显示值设置为内联的内容，并将其更改为阻塞。在jquery中，show将将display属性设置为最初设置的任何内容。在这种情况下，它是内联块，这就是为什么你的标志是向左移动。