Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can we do fade in and fade out in iframes

Is it possible to make fade in and fade out transitions in iframes?

like image 277
kumar Avatar asked May 15 '09 06:05

kumar


People also ask

How do you fade-in fade-out in Javascript?

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);

How is use fade and fade-out?

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.

How do you add a fade-in effect?

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.


2 Answers

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.

like image 95
James Avatar answered Oct 17 '22 08:10

James


you can do it with jquery!

http://docs.jquery.com/Effects/fadeOut

http://docs.jquery.com/Effects/fadeIn

like image 36
Konstantinos Avatar answered Oct 17 '22 08:10

Konstantinos