javascript - 无法使用 .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

根据关于 animate 方法的 jQuery 文档 here :

Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(), the .animate() method does not make hidden elements visible as part of the effect. For example, given $( "someElement" ).hide().animate({height: "20px"}, 500), the animation will run, but the element will remain hidden.

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

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