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

Question

我正在将导航固定到页面顶部。我正在使用 Bootstrap（仅限 CSS）。我正在使用 jQuery 隐藏一个徽标 (img class .logo) 并显示另一个 (img class .logo-sm) , 在滚动中。

基本上一切正常，除了一件事。隐藏功能在淡出时将主徽标向左滑动，但我希望它向上滑动。我很确定这不是 .hide() 函数的默认行为，但我不太了解 jQuery 所以我不确定如何更改它。

我构建了一个 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);
        }
    });
});

但是您的 fiddle 中还有一些其他事情正在发生，这导致了一些奇怪的事情，所以这不会更好。我建议不要使用 jQuery 设置动画，而是使用它来更改元素上的 classes 并使用 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 class。

Answer 2

这是因为 .show() 正在应用 display: inline-block 而你需要的是 display: block.

要解决此问题，您需要找到将 header .logo css 显示值设置为内联并将其更改为块的原因。从 jquery api 开始，show 会将显示属性设置为最初设置的值。在本例中，它是 inline-block，这就是您的徽标向左移动的原因。

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

jQuery .hide() -- sliding elements left

javascript

jquery

show-hide

twitter-bootstrap