Question

我为参与视频制作的客户开发了一个页面http://www.gracealie.com。我制作了一个缩略图库，在点击时显示包含相应视频的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>

javascript fadeIn / fadeOut不能同时工作

0 个答案: