JQuery fade in, with mouserover fadein and out effect issue

what im trying to accomplish is a fadein effect on page load , then a nice fadeout and in effect on mou开发者_运维知识库se over for each individual item, you can see what i have working here: http://themes.thefragilemachine.com/themachine_v4/

I know this can be done using a child call? i just not sure how to do it, but basicly i would like to have 1 class i can apply to really any div and have it use the effect, for the mouse over at least, any help would be amazing! thank you!

here is my Jquery Code:

<script type="text/javascript"> 
    $(document).ready(function() {

        window.onload = function() { $('.test1').hide().fadeIn(1500); };

        $('.test1').mouseover(function() { 
            $('.test1').fadeOut('fast').fadeIn('slow'); 
        });
    });
</script> 

here is my html code :

<div class="featured-pitem g_4 test1"></div>
<div class="featured-pitem g_4 test1"></div>
<div class="featured-pitem g_4 test1"></div>
<div class="featured-pitem g_4 test1"></div>
<div class="featured-pitem g_4 test1"></div>
<div class="featured-pitem g_4 test1"></div>

Are you looking for this perhaps?

$('.test1').mouseover(function() {
    $(this).fadeOut('fast').fadeIn('slow');
});

Using $(this) should apply the fading effects to the current element only, using $('.test1') applies the effects to all elements with a class of test1.

You are assigning the "window.onload" listener inside document.ready. But document.ready fires after window.onload, so your code doesn't have any effect. In any case, when window is loaded, there's no DOM loaded yet, so there's no elements to select. You should rewrite it something like this:

$(document).ready(function() {

$('.test1').hide().fadeIn(1500);
$('.test1').mouseover(function() { $('.test1').fadeOut('fast').fadeIn('slow');  } );


});

By the way, there's a nice shortcut for jQuery $(document).ready(...) equals $(...), just put the function in the $(...) call

<script type="text/javascript"> 
$(document).ready(function() {

    $('.test1').hide().fadeIn(1500);

    $('.test1').mouseover(function() { $(this).fadeOut('fast').fadeIn('slow');  } );


});
</script>

For fading sequence , you can use something like this :

<script type="text/javascript"> 

$(document).ready(function() {

$('.test1').hide();

$('.test1').each(function(i){
        var timing = i*2+60;
        $(this).delay(timing).fadeIn(1500);
});





$('.test1').mouseover(function() { $(this).fadeOut('fast').fadeIn('slow');  } );

});