必须单击 div 两次才能在 jQuery 中激活动画

Question

我有一个隐藏的面板，当你点击一个div时，它会滑入。然后，您可以通过单击"关闭"文本或淡入面板后面的深色背景来关闭它。关闭它并尝试重新激活面板后，您必须单击它两次。

我在stackoverflow上四处寻找，看起来我应该将其从.click更改为.on并添加e.preventDefault。但是我无法让它工作。

下面是一个显示双击问题的 JSFiddle。

这是我的jquery：

var scrollbarWidth = parseInt(getScrollBarWidth (),10); //get width of scroll bars, assume its constant
$('#sauceThumb').on( "click", function(e) {
    e.preventDefault();
    if($('#sauceDet').css("right") === "-9999px") // don't do anything if panel is already being shown
    {    
        $('#cover').fadeIn(200);
        $('#mainContent').addClass('blur');
        $('#sauceDet').animate({
        right: "0"
        }, 700, 'linear');
        var scrollPos = {
        top  : self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        left : self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
        };
        $('body, html').data('scroll', scrollPos).css('overflow', 'hidden');
        $('body').css('margin-right',parseInt($('body').css('margin-right'),10) + scrollbarWidth + 'px'); // add width to body margin
        window.scrollTo(scrollPos.top, scrollPos.left);
    }    
});
$('.close, #cover').on( "click", function()
{
    $('#sauceDet').animate({
        right: "-9999px"
    }, 1500, 'linear');
    $('#mainContent').removeClass('blur');
    $('#cover').fadeOut(200);
});
function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";
    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);
    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;
    document.body.removeChild (outer);
    return (w1 - w2);
};

Answer 1

这个结果是你想要的吗？

我改变这条线

$('#sauceDet').animate({ right: "-9999px" }, 1500, 'linear');

自

$('#sauceDet').animate({ right: "-9999px" },'linear');

问题是从 1,5 秒开始的时间