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

时间:2014-03-14 00:36:17

标签: javascript jquery css vimeo froogaloop

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

当我退出时($(玩家)它会返回:

enter image description here

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

1 个答案:

答案 0 :(得分:2)

根据animate方法here的jQuery文档:

  

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

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

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