Question

我有一个网站，当有人点击联系人链接时，在导航栏中会出现一个联系人框并向下滑动。然后导航向下移动以保持在接触盒（刚刚出现）下方。问题是当您再次单击联系人链接时，切换会隐藏联系人框，但如果联系人框仍然可见，则会将导航栏保留在原来的位置。这是代码：

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;
});

有什么想法吗？

Answer 1

我找到了解决方案。

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;
    }
});

Answer 2

问题是top: contactBar.height()将在contactBar.toggle()完成之前运行 - 实际上，它几乎会立即运行。因此，您需要将其移动到toggle以在切换动画完成时调用：

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

此外，评论者提及的行应以;而不是,结尾！

jQuery用多个动画切换

2 个答案: