Menu
Is it possible to make fade in and fade out transitions in iframes?
277
If the elements are faded out, fadeToggle() will fade them in. If the elements are faded in, fadeToggle() will fade them out. Syntax: $(selector).fadeToggle(speed,callback);
The Fade In/Fade Out behavior is useful for introducing and removing animated elements. For example, you can apply the Fade In/Fade Out behavior to text that moves across the screen to make it fade into existence, and then fade away at the end of its duration.
All you need to do is drag and drop your video to your timeline, select the transition tab on the left sidebar then drag a transition onto the timeline. You can also add a fade-in or fade-out to a video, audio, or image clip by selecting it in the timeline and using the fade tab.
Fading in or out can be achieved by changing the opacity of an element over time, a very simple example:
var iframe = document.getElementById('iframe');
fadeOut(iframe, 1000);
function fadeOut(el, duration) {
/*
* @param el - The element to be faded out.
* @param duration - Animation duration in milliseconds.
*/
var step = 10 / duration,
opacity = 1;
function next() {
if (opacity <= 0) { return; }
el.style.opacity = ( opacity -= step );
setTimeout(next, 10);
}
next();
}
While jQuery is an incredible library your usage of it should be justified by more than just its ability to create fancy effects. A library should be adopted for its completeness and ease of use; not because it happens to offer just one thing you might want to use.
95
you can do it with jquery!
http://docs.jquery.com/Effects/fadeOut
http://docs.jquery.com/Effects/fadeIn
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
