Question

I'm using a very simple fade function with MooTools 1.2 (I 'have' to use MooTools 1.2 due to a complication over another function being called on the same page). I'm basically fading a title in on my page. Everything works great but I can't seem to find documentation on how to control the duration simply. Everything I find seems to refer to other functions and I'd like to keep this as simple as possible. Here's the javascript I've got:

window.addEvents({
    load: function(){
        var singleImage = $('myimage2');
        singleImage.set('styles', {
            'opacity': 0,
            'visibility': 'visible'
        });
        singleImage.fade('in');
    }
});

So as you see, it takes an image with id="myimage2" (which I have initially hidden with CSS) and fades in when the document is ready. It fades in quickly and I'd like it to fade in more gradually. Any ideas? Thanks.

Was it helpful?

Solution

Using the example from your previous question - http://jsfiddle.net/RNeS5/208/

// set-up an event on the browsers window
window.addEvents({

    // be sure to fire the event once the document is fully loaded
    load: function(){

        // assing 'singleImage' variable to the image tag with the 'image' ID
        var singleImage = $('image');

        // set a bunch of CSS styles to the aforementioned image
        singleImage.set('styles', {
            'opacity': 0,
            'visibility': 'visible'
        });

        // fade in the image
        singleImage.set('tween', { duration: 2000 }).fade('in');
    }
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top