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

【问题标题】：jQuery .hide() -- sliding elements leftjQuery .hide() -- 向左滑动元素
【发布时间】：2015-05-11 01:00:37
【问题描述】：

我正在将导航固定到页面顶部。我正在使用 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);
    }
});
});

【问题讨论】：

标签： javascript jquery twitter-bootstrap show-hide

【解决方案1】：

发生这种情况是因为 .show() 正在应用 display: inline-block 而您需要的是 display: block。

要解决此问题，您需要找到将标头 .logo css 显示值设置为内联并将其更改为阻塞的原因。在 jquery api 中，show 会将 display 属性设置为最初设置的任何值。在这种情况下，它是 inline-block 这就是您的徽标向左移动的原因。

【讨论】：

我现在明白了。这很奇怪，因为我没有在任何地方添加它。感谢您指出这一点！
点赞答对+滑动效果说明

【解决方案2】：

$.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 类的样式。

【讨论】：