悬停时淡入/淡出效果

Question

I have a FadeIn/Out effect on my page for a couple of Social logos.

It seems they work fine but the initial fade in wont work untill i hover over them.

How can i make the fade in function work when the page is loaded?

<script type='text/javascript'>
    $(document).ready(function()
    {
        $("img.a").hover(function() 
        {
            $(this).stop().animate({"opacity": "1"}, "fast");
        },
        function() 
        {
            $(this).stop().animate({"opacity": "0.5"}, "fast");
        });
    });
</script>

The Page:

www.tranceil.fm

Answer 1

I know you need a jQuery solution but why to use it if you can do it with CSS?

img.class {
   opacity: .5;
   transition: opacity 2s;
   /* Transitions will take care of the smooth effect */
   -moz-transition: opacity 2s; /* Firefox 4 */
   -webkit-transition: opacity 2s; /* Safari and Chrome */
   -o-transition: opacity 2s; /* Opera */
}

img.class:hover {
   opacity: 1;
}

Note: Am not using rgba because it is just an image

For IE support you can use CSS3 Pie

If you still want to stick to jQuery, am not that good with it but I guess you can set initial opacity for your social icon by simply defining it in your CSS

img.a {
   opacity: .5;
}

Answer 2

Simply set the CSS already once the document is loaded.

$(document).ready(function(){
    $("img.a").css({"opacity": "0.5"});
    $("img.a").hover(
        function() {
            $(this).stop().animate({"opacity": "1"}, "fast");
        },
        function() {
            $(this).stop().animate({"opacity": "0.5"}, "fast");
        }
    );
});

Answer 3

How about

<script type='text/javascript'>
$(document).ready(function(){
    $("img.a").hover(
        function() {
            $(this).stop().animate({"opacity": "1"}, "fast");
        },
        function() {
            $(this).stop().animate({"opacity": "0.5"}, "fast");
        }
    ).css('opacity':'0.5');

});
</script>

You can do it with CSS too but jQuery is a little more browser-safe.