jQuery與多個動畫切換

我有一個網站，當有人點擊聯繫人鏈接，在導航欄中，出現一個聯繫人框並滑下。然後，導航向下移動，保持在剛剛出現的聯繫方式下方。問題在於當您再次單擊聯繫人鏈接時，切換隱藏了聯繫人框，但是如果聯繫人框仍然可見，則會將導航向下留在原來的位置。這裏是代碼：jQuery與多個動畫切換

contactBarBtn.click(function (e) { 
    search_close(); 
    contactBar.toggle(); 
    navbarFixedTop.animate({ top: contactBar.height() }, 'slow'), 
    contactBar.animate({ top: '0' }, 'slow'), 
    contactCorner.css('display', 'block'), 
    e.preventDefault(); 
    return false; 
});

任何想法？

來源

2015-06-15 Joseph Manning

爲什麼用逗號分隔語句？ – adeneo

不確定。腳本就是這樣來的。 –

我找到了解決方案。

contactBarBtn.click(function (e) { 
    if (jQuery('.contact-bar-corner').css('display') == 'block') { 
     search_close(); 
     navbarFixedTop.animate({ top: '0' }, 'slow'); 
     contactBar.animate({ top: -contactBar.height() }, 'slow'); 
     stickyHeader.removeClass('sticky'); 
     contactCorner.css('display', 'none'); 
     e.preventDefault(); 
     return false; 
    } 
    else if (jQuery('.contact-bar-corner').css('display') == 'none') { 
     search_close(); 
     contactBar.show(); 
     navbarFixedTop.animate({ top: contactBar.height() }, 'slow'); 
     contactBar.animate({ top: '0' }, 'slow'); 
     stickyHeader.addClass('sticky'); 
     contactCorner.css('display', 'block'); 
     e.preventDefault(); 
     return false; 
    } 
});

來源

2015-06-17 04:14:47

優秀 - 您可以使用'jQuery（'。contact-bar-corner'）。is（'：visible'）'而不是'jQuery（'。contact-bar-corner'）。css（'display'） =='沒有'，但這是一個小風格的事情。對不起，我受了重感冒，沒有機會製作JSFiddle。我很高興你明白了。 – Cymen

我很抱歉聽到這個消息。謝謝您的幫助。 –

問題是top: contactBar.height()將在contactBar.toggle()完成之前運行 - 事實上，它幾乎可以馬上運行。因此，相反，你需要移動到toggle當切換動畫結束後到被調用：

contactBar.toggle(function() { 
    navbarFixedTop.animate({ top: contactBar.height() }, 'slow'); 
});

此外，線路應與;不,作爲評論者提到結束！

來源

2015-06-15 20:06:55 Cymen

當我第二次點擊它時，它仍然存在。聯繫人框正在消失，但導航未返回頂部。我嘗試添加第二個函數和相同的代碼，但添加了-contactBar.height（），但鏈接停止工作。 –

下面是代碼 'contactBar.toggle（函數（）{ \t navbarFixedTop.animate（{頂部：contactBar.height（）}， '慢'）， contactBar.animate（{頂部： '0'}， '慢'）， stickyHeader.addClass（ '粘性'）， contactCorner.css（ '顯示器'， '塊'）， }，函數（）{ navbarFixedTop.animate（{頂部：-contactBar.height（）}，'slow'）， contactBar.animate（{top：'0'}，'slow'）， stickyHeader.removeClass（'sticky'）， contactCorner.css（'display'，'none'）， }）;' –

@JosephManning Hrm，我想我們需要一個JSFiddle，因爲它有很多事情發生 - 我懷疑你需要跟蹤原始的最高值，並在切換關閉時重新加入。 – Cymen

jQuery與多個動畫切換

回答

相關問題