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

这是result你想要的吗？

我改变了这一行

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

到

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

问题是从1.5秒开始的时间

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

1 个答案: