Can't get hidden image to display with .show()

Question

I'm using the vimeo api to slide a video off the screen after it finishes playing. Underneath the video player, hidden, I have an image that says 'replay'. The image though is slightly bigger than the player so I want to hide the image via .hide() or display: none in the css and then show it after the animation of the video player completes.

Here's 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 is hiding the image. And then when the onFinish function completes I'm trying to show() the image, but it won't work. I should note that when I reverse it and do:

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

it works.

Here's 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've also tried setting display: none in the css, but that wont work either. Not sure what I'm missing.

Thanks.

EDIT

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

When I log out ($(player) it returns:

enter image description here

And when I log out console.log($(player).next()); it logs out the image that I am trying to show.

Are you missing a tag in this question? That HTML is NOT html, is it? — Leo, Mar 14 '14 at 00:41
`Uncaught TypeError`... It seems that jQuery is not available? — Koen., Mar 14 '14 at 01:04
Are you loading a library other than jQuery and/or loading multiple versions of jQuery on the same page? — Samsquanch, Mar 14 '14 at 03:12
I'm using zurb foundation. The only other libraries would be modernizr and typekit. But I can do .hide() and it works, which is what's confusing me. — reknirt, Mar 14 '14 at 03:18

score 2 · Answer 1 · answered Mar 14 '14 at 03:13

According to the jQuery documentation on the animate method 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.

I had a similar need in a project and what worked for me there was to set the z-index of the element I wanted to hide to be less than that of the background. Then, when I wanted to show (or, in your case, animate) I could apply the jQuery methods to the element as if they were hidden (by increasing the z-index so that the element becomes visible), yet not incur the undefined behaviour of attempting to manipulate a hidden element.

Another option would be to move the element off the screen by way of a negative (x, y) coordinate and work from there. I'm not sure which visually would be more appealing in your use case but mention it for completeness.

The item I'm animating isn't hidden. It's an image behind the item I'm animating. But you're right. I'm probably just going to have to try another way of "hiding" it. — reknirt, Mar 14 '14 at 03:17

Can't get hidden image to display with .show()

1 Answers1