CODEWITHSUNDEEP
javascriptjquery
sjarmenitt
sjarmenitt

Reputation: 251

Add fade in effect on onload

How can i add fade in for this specefic code? I want the pictures to fade in on onload. Have done some research on Stackoverflow, but couldn't find anything useful. Some help would be appreciated.

<script type="text/javascript">
window.onload = function(){
       var img = document.getElementById('img')
       if(img.clientHeight<$('#div').height()){
            img.style.height=$('#div').height()+"px";
       }
       if(img.clientWidth<$('#div').width()){
            img.style.width=$('#div').width()+"px";
       } 
}
</script>

Extra question: Is it also possible to add a load-function to this code?

Upvotes: 0

Views: 1598

Answers (1)

Slukehart
Slukehart

Reputation: 1037

Sj what your attempting to do can be simplified using jQuery. jQuery is a JavaScript library that makes working with HTML documents much easier.

Here is a little fiddle demonstrating their fadeIn method: http://jsfiddle.net/zgRtd/3/

Just to make sure your clear on what's happening:

We declare a function named load Image - this function uses jQuery to attach the fadeIn method to our jQuery object (referenced with CSS Selectors).

The images are set to display: none; initially.

function loadImage () {
    $('#your-image').fadeIn('slow', function () {
        // Animation complete
    });
}

We call the function once the document is loaded (this could be bound to any event), I've commented this out in the JSFiddle example.

$(document).on('ready', function () {
    loadImage();
});

Upvotes: 2

Related Questions