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();
});
}
($ (), :

console.log($(player).next());, , .