jQuery toggleClass - 無法生成動畫或給它轉換

我的代碼有一個小問題。我有一個元素，當頁面滾動它會出現。但是，我無法讓它以更平滑的方式「出現」。我試過CSS轉換和嘗試淡入，但都沒有工作。它始終只是「跳躍」中，我不能讓它在緩解jQuery toggleClass - 無法生成動畫或給它轉換

這裏是代碼：

$(window).on("scroll", function() { 
    $('.navbar').toggleClass('visible', $(document).scrollTop() > 40); 
});

所以它看起來不錯，但我無法弄清楚如何動畫添加班級名稱。

這是者均基於CSS：

.navbar { 
    visibility: hidden; 
} 

.navbar.visible { 
    visibility: visible; 
}

來源

2014-02-13 LEchoM09

visibility不能用CSS轉換動畫。

但你可以這麼做：

.navbar { 
    opacity: 0; 
    transition: opacity .5s ease; // Feel free to use prefixes. 
} 

.navbar.visible { 
    opacity: 1; 
}

CSS過渡/動畫肯定是動畫在2014年（）你應該避免fadeToggle和其他jQuery的動畫方法的最佳途徑。

來源

2014-02-13 16:46:57 enguerranws

太感謝你了，我覺得這個工作最好的！ – LEchoM09

考慮到CSS動畫，你做了50％的工作比JS動畫更好。 – enguerranws

而不是使用toggleClass，使用fadeToggle。它會盡你所能爲CSS盡最大努力。

試試看，只是fadeToggle（）;

來源

2014-02-13 16:43:32 httpgio

-1

正如其他答案所示，fadeToggle（）將爲您完成工作。坦率地說，這可能是實現這種效果最簡單的方法。

CSS轉換需要轉換屬性。將下面的代碼塊中的每個CSS聲明：

transition: visibility .25s linear; 
-webkit-transition: visibility .25s linear; 
-moz-transition: visibility .25s linear; 
-o-transition: visibility .25s linear;

如果你有知名度的困難，請嘗試使用不透明度來代替。

來源

2014-02-13 16:49:03 daekano

這裏是你的代碼正確的CSS轉換的例子。你不能激發可見度，但你可以玩位置和不透明度。

http://jsfiddle.net/xZ6fm/

.navbar { 
    position: fixed; 
    top: -100px; 
    left: 0; right: 0; 
    padding: 12px; 
    opacity: 0; 
    background: #ccc; 
} 

.navbar.visible { 
    top: 0; 
    opacity: 1; 
    -webkit-transition: top 0.3s linear, opacity 0.7s linear; 
    -moz-transition: top 0.3s linear, opacity 0.7s linear; 
    transition: top 0.3s linear, opacity 0.7s linear; 
}

來源

2014-02-13 16:59:34 putskoo

jQuery toggleClass - 無法生成動畫或給它轉換

回答

相關問題