Unable to get hidden image to display with .show ()

I use vimeo api to display video from the screen after the game is completed. Under the video player hidden, I have an image that says "replay". The image is slightly larger than the player, so I want to hide the image with .hide()or display: nonein css, and then show it after the animation of the video player is complete.

Here is my 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();
    });
  }
});

So, the first line hides the image. And then, when the function onFinishcompletes, I try the show()image, but that will not work. I should note that when I cancel it and do:

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

it works.

Here is my 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"

And CSS:

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

I also tried installing display: nonein css, but this will not work either. Not sure what I am missing.

Thank.

EDIT

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());, , .

+4
1

jQuery :

. , .slideDown() .fadeIn(), .animate() . , $( "someElement" ).hide(). Animate ({height: "20px" }, 500), , .

, z- , , , . , (, , ), jQuery , ( z, ), undefined .

(x, y) . , , .

+2

Source: https://habr.com/ru/post/1531677/


All Articles