simplest way to make div fadeOut

It's probably because I haven't been getting enough sleep, but I just can't figure this out. I'm trying to make a page where you have multiple videos, and then there's a div on top that appears suddenly and fades as the video is loading, all of this onClick. I had it earlier today, but now it's not working. The part of the function is

$('#hh').animate({
        opacity: 1
    }, 0, function() {
            myVideo.src = videos[numb];
        myVideo.load();
        myVideo.play();
     $('#hh').fadeOut(400);                                                        
    });

so, why isn't this working?

Answers


$('#hh').show();
myVideo.src = videos[numb];
myVideo.load();
myVideo.play();
$('#hh').fadeOut(400);                                                      

.fadeOut is a pretty easy way to get things to fade out.

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.


$('TARGET').fadeOut(300); // TARGET is any valid selector

fadeOut()

   $('#hh').show('fast', function() {
         myVideo.src = videos[numb];
         myVideo.load();
         myVideo.play();
         $(this).fadeOut(400);                                                        
    });

also you can use

   $('#hh').fadeIn('fast', function() {
         myVideo.src = videos[numb];
         myVideo.load();
         myVideo.play();
         $(this).fadeOut(400);                                                        
    });

fadeIn()


You can replace the your code with,

    $('#hh').fadeIn('slow', function() {

                   // Call Back Function 

                   myVideo.src = videos[numb];
                   myVideo.load();
                   myVideo.play();
                   $('#hh').fadeOut('slow');                            
        }                            
    });

But there is one thing that I have not understood, is that why you want to set opacity 0 after myVideo.play();


You could use fadeIn, in the callback change your video src, load and play, and finally fadeOut. It should work

$('#hh').fadeIn(400, function () {
  myVideo.src = videos[numb];
  myVideo.load();
  myVideo.play();
  $(this).fadeOut(400);    
});

Need Your Help

Will be there issues when upgrading from Kohana3?

php kohana kohana-3 backwards-compatibility

I would like to know about the compatibility between upcoming versions of KO3. I have heard that once 3.1 comes in, it won't be easy to simply upgrade to it from kohana 3.0 (Wordpress upgrade is pr...

Why ConcurrentHashMap.Segment and ConcurrentHashMap.HashEntry classes are static?

java design-patterns concurrency

Why ConcurrentHashMap.Segment and ConcurrentHashMap.HashEntry classes are static?