无法使用 .show() 显示隐藏图像

Question

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

这是我的 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;
}

我也尝试在 css 中设置 display: none，但这也不起作用。不知道我错过了什么。

谢谢。

编辑

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

当我退出时 ($(player) 它返回：

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

Answer 1

根据关于动画方法here的jQuery文档：

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

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

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