使用.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();
    });
}

当我退出时（$（玩家）它会返回：

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

Answer 1

根据animate方法here的jQuery文档：

  

注意：与.slideDown（）和.fadeIn（）等速记动画方法不同，.animate（）方法不会将隐藏元素作为效果的一部分显示。例如，给定$（＆＃34; someElement＆＃34;）。haide（）。animate（{height：＆＃34; 20px＆＃34;}，500），动画将运行，但元素将保持隐藏状态。

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

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