jquery can you fadeIn a video

问题

I have a flv file inside the vid.html which is working fine, but is there any way to have the video itself to fadeIn/fadeOut?

<div id="fadeit">
    <div class="video"></div>
</div>

this does not work;

$('.video').hide().fadeIn().load('vid.html');

wrapping it in a div and fading the div does not work either;

$('#fadeit').hide().fadeIn(1400);

回答1:

no wmode or wmode transparent: FF, Chrome and Safari

wmode opaque, FF, Chrome, Safari and IE8 (only have ie8 to test)

Both fade flash and div overlay.

http://jsfiddle.net/WWvmz/2/

回答2:

You cannot style flash stuff. You even cannot put eg a menu above a flash object.

(One of the reasons why flash must die)

回答3:

A way to mimic this is by overlaying a full white absolutely positioned div over the iframe where the video is embeded in and fade out this div.

Set the div's standard CSS to "display: none;" to prevent the video from not being shown if people have javascript disabled and have jquery show it.

Sample CSS

#video_container {
    position: relative;

    width: 725px;
    height: 430px;
}

#video_overlay {
    position: absolute;

    top: 0;
    left: 0;

    width: 725px;
    height: 430px;

    background-color: #FFFFFF;
}

Sample html

<div id="video_container">
    <div id="video_overlay"></div>
    <iframe width="725" height="430" src="http://www.youtube.com/embed/TxvpctgU_s8?rel=0&showinfo=0&autoplay=1&loop=1"></iframe>
</div>

jquery

$("#video_overlay").show(); 
setTimeout(function() { 
    $("#video_overlay").fadeOut(1500); 
}, 2500);

I use the setTimeout function to have the overlay fadeout after the video is loaded (to prevent the black loading screen). This can be left out as well if you aren't bothered by the loading screen

$("#video_overlay").show(); 
$("#video_overlay").fadeOut(1500);

To fade out again

$("#video_overlay").fadeIn(1500);

jsfiddle: http://jsfiddle.net/RPjXv/2/

来源：https://stackoverflow.com/questions/2909178/jquery-can-you-fadein-a-video