4

我正在使用 vimeo api 在完成播放后将视频滑出屏幕。在隐藏的视频播放器下方，我有一张图片，上面写着“重播”。虽然图像比播放器略大，所以我想通过.hide()或display: none在 css 中隐藏图像，然后在视频播放器的动画完成后显示它。

这是我的js：

$(document).ready(function() {
  $(".vimeo-container img").hide();

  $('iframe.vimeo').each(function(){
    Froogaloop(this).addEvent('ready', ready);
  });

  function ready(playerID){
    Froogaloop(playerID).addEvent('finish', onFinish);
  }

  function onFinish(playerID) {
    var player = "#" + playerID;
    $(player).animate({width: "0%"}, 750, function() {
      $(player).next("img").show();
    });
  }
});

所以第一行是隐藏图像。然后当onFinish功能完成时，我正在尝试show()图像，但它不起作用。我应该注意，当我反转它并执行以下操作时：

$(player).next("img").hide();

有用。

这是我的 HTML：

%section#container1
  .row.video-left
    .large-8.columns
      .vimeo-container
        .flex-video.widescreen.vimeo
          %iframe.vimeo#player1{allowfullscreen: "", frameborder: "0", height: "225", mozallowfullscreen: "", src: "http://player.vimeo.com/video/60122989?api=1&player_id=player1", webkitallowfullscreen: "", width: "400"}
          = image_tag "behind1.png", class: "behind1"

和 CSS：

.vimeo-container {
    position: relative;
    .behind1 {
        margin-top: -27em;
}

我也试过display: none在css中设置，但这也行不通。不知道我错过了什么。

谢谢。

编辑

function onFinish(playerID) {
    var player = "#" + playerID;
    $(player).animate({width: "0%"}, 750, function() {
      console.log($(player));
      $(player).next().show();
    });
}

当我注销时 ($(player) 它返回：

在此处输入图像描述

当我注销时，console.log($(player).next());它会注销我要显示的图像。

4

1 回答 1

2

根据这里关于 animate 方法的 jQuery 文档：

注意：与 .slideDown() 和 .fadeIn() 等速记动画方法不同，.animate() 方法不会使隐藏元素作为效果的一部分可见。例如，给定 $( "someElement" ).hide().animate({height: "20px"}, 500)，动画将运行，但元素将保持隐藏状态。

我在一个项目中也有类似的需求，对我有用的是将要隐藏的元素的 z-index 设置为小于背景的 z-index。然后，当我想显示（或者，在你的情况下，动画）时，我可以将 jQuery 方法应用于元素，就好像它们被隐藏一样（通过增加 z-index 使元素变得可见），但不会导致未定义试图操纵隐藏元素的行为。

另一种选择是通过负 (x, y) 坐标将元素移出屏幕并从那里开始工作。我不确定在您的用例中哪个视觉上更有吸引力，但为了完整性而提及它。

于 2014-03-14T03:13:54.967 回答