jQuery slideUp在Firefox和Safari中的行为有所不同

我是jQuery和css的初级用户，我无法弄清为什么我的slideUp（）& slideDown（）方法在Chrome和Firefox/Safari中的行为不同。jQuery slideUp在Firefox和Safari中的行为有所不同

对于我的投资组合的项目，我加入垂直几张图片。在每次点击时，其描述div显示（slideDown（）），其他打开的描述消失（slideUp（））。

 $(".project").each(function(){ 
     $(this).click(()=>{ 
     $(".project").find('.projectDescription').slideUp() 

     setTimeout(()=>{ 
      $(this).find('.projectDescription').slideDown(400) 
     }, 400) 
     }) 
    })

在Chrome中，点击图像不走上面的页面的顶部，它描述滑下和先前图像的描述向上滑动。它受到其他div高度变化的影响，直到达到页面顶部。
但是，在Safari和Firefox中，当其他打开的描述向上滑动并且其高度发生变化时，单击的图像实际上位于页面顶部之上。

例如：Firefox vs Chrome

我将不胜感激，如果你能解释一下为什么，以及如何解决这个问题。

来源

2017-07-19 jkoo87

我似乎无法重现您所谈论的问题 - 或者我误解了您的问题。 “超出页面顶部”是什么意思？ – Terry

我对此感到抱歉。我添加了一个例子。请看看它！ – jkoo87

我不确定你有什么问题，你想解决什么问题，因为你的描述有点混乱......但让我试试。我修复了代码，当你再次点击同一张照片时，它隐藏并且不会滑动。我使用标志来检查用户是否点击了相同或不同的照片，如果相同，则跳过整个slideUp部分：

var checkSame; 
$('.project').on('click', function() { 
    var photo = this.id; 
    if (photo != checkSame) { 
     $('.project').find('.projectDescription').slideUp(); 
    } 
    checkSame = photo; 
    $(this).find('.projectDescription').slideToggle(600); 
});

PS。下一次不要链接到'只读'代码;）

来源

2017-07-20 00:42:25 justDoIT

我很抱歉的混淆。正如你所看到的，我真的很新鲜。我添加了一个例子，说明它在Firefox浏览器中的行为。请看看它。此外，你知道如何将'只读'文件更改为'读写'文件在codepen？ – jkoo87

[@ jkoo87]（https://stackoverflow.com/users/8334248/jkoo87）：仍然不确定你有什么问题，但是当我使用我的代码向下滚动页面时，单击的图像通常会'超出顶部页面“都在Chrome和Firefox中。我的意思是图像可以离开窗口视口。你使用我的代码检查了行为吗？关于'只读'的链接，我不知道它是如何进行codepen。我正在使用[jsfiddle]（https://jsfiddle.net/），并且在这个网站上一切正常。 – justDoIT

jQuery slideUp在Firefox和Safari中的行为有所不同

回答

相关问题