javascript fadeIn/fadeOut不能同时工作

我为一位参与视频制作的客户开发了一个页面。我制作了一个缩略图库，在单击时显示一个包含相应视频的div。当您单击一个小“x”图形时，div将再次隐藏，您可以使用箭头图形导航到库中的下一个或上一个视频，同时淡入下一个视频和淡出当前视频

下面是一些JavaScript：

$("div.link").click(function(){

  $("#background").css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 680);
  $("body").css({overflow: "hidden"});

});

$("#video1link").click(function() {

  $("#video1").css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 680);
  $("#video1").fadeIn(680);

});

$("#video1previous").click(function() {

  $("#video2").fadeOut(680);
  $("#video1").css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 680);
  $("#video1").fadeIn(680);

});

乍一看，我的代码是有效的，但它只在第一次顺利地工作。每次在第一次显示相应视频的div后单击“下一个”或“上一个”按钮时，一个div将淡出，然后暂停，然后第二个div将淡入。我想要的效果是它们同时淡入淡出，就像第一次单击时一样。有什么想法吗

以下是其中一个隐藏div的HTML，其中包含一个视频：

<div class="videopage" id="shortterm12">
<div class="video">
<video class="video" id="shortterm12video" width="640" height="360" controls="controls">
  <source src="video/shortterm12.mp4" type="video/mp4">
  <source src="video/shortterm12.ogg" type="video/ogg">
  <source src="video/shortterm12.webm" type="video/webm">
  <object data="video/shortterm12.mp4" width="640" height="360">
    <embed src="video/shortterm12.swf" width="640" height="360"></embed>
  </object>
</video>
<div class="close"><img class="close" src="images/close.png" /></div> </div>
<img class="next" id="sigurrosnext" src="images/next.png" />
<div class="description">
<p class="title">Short Term 12  Official Trailer</p>
<p class="description"> Director: Destin Cretton</br>
  Production Designer: Rachel Myers</br>
  Art Director: Grace Alie</p>
</div>
</div>

短期12官方预告片
主管：Destin Cretton

制作设计师：雷切尔·迈尔斯

艺术总监：格雷斯·阿莉

你能制作一个JSFIDLE来演示这个问题吗？当我访问你的页面并尝试导航时，我发现一些控制台错误<代码>未捕获InvalidStateError:未能设置“HTMLMediaElement”的“currentTime”属性：该元素的readyState为HAVE\u NOTHING。。你已经调查过这个错误了吗？