Question

I have a button, when you click on that button, I’m doing a fadeToggle() to show or hide a popup.

That popup is appearing on top of a flash video that autoplays.

So, what I want to do, is when the popup is visible, I want to pause the video. When it’s hidden, play the video.

My video player already support those function. So this is working fine:

 videoPlayer.pause(); 
 videoPlayer.play()

So what my FadeToggle() would looks like ? Right now I have this code:

  $("#categorySlider").fadeToggle('fast', function() {
       var videoPlayer = document.getElementById("videoContainer");
       videoPlayer.pause();
  });

I’m missing the play() part here, but I cant figure out the syntax to add it?! If fadeToggle is not the right thing to use, any jquery or javascript is fine!

Any helps please?

Answer 1

You could use the jquery :visible selector to find out if #categorySlider is visible or not and depending on that pause or play the video.

$("#categorySlider").fadeToggle('fast', function() {
   var videoPlayer = document.getElementById("videoContainer");
   if ($("#categorySlider").is(":visible"))
        videoPlayer.pause();
   else
        videoPlayer.play(); 
});