Add Element OR Animate/Add Effect To Element On Hover (WITH JQuery NO CONFLICT)

by bizamajig

HTML

<div class="xfadeload">
        <a href="http://factorybox.devilcantburn.com/dreamworks/astroboy-the-story-of-the-dead-kid/" class="link_blog">
            <img width="600" height="200" src="http://factorybox.devilcantburn.com/wp-content/uploads/2011/05/astro1-600x200.jpg" class="fadeover wp-post-image" alt="astro" title="astro" style="opacity: 1; " />
        </a>
    </div>

    <div class="xfadeover">
        <a href="http://factorybox.devilcantburn.com/dreamworks/astroboy-the-story-of-the-dead-kid/" class="link_blog">
            <img width="600" height="200" src="http://factorybox.devilcantburn.com/wp-content/uploads/2011/05/astro1-600x200.jpg" class="fadeover wp-post-image" alt="astro" title="astro" style="opacity: 1; " />
        </a>
    </div>

    <div class="hover bg-fade-down">
        <a href="http://factorybox.devilcantburn.com/dreamworks/astroboy-the-story-of-the-dead-kid/" class="link_blog">
            <img width="600" height="200" src="http://factorybox.devilcantburn.com/wp-content/uploads/2011/05/astro1-600x200.jpg" class="fadeover wp-post-image" alt="astro" title="astro" style="opacity: 1; " />
        </a>
    </div>

CSS

.bg-fade-down {
background: #181818;
display: block;
}

JavaScript

/*
var $j = jQuery.noConflict();
*/

// Fade load image
$(function() {
/*
    $(".fadeload").css("opacity", "0");
    $(window).load(function() {
        $(".fadeload").animate({
            opacity: 1
        }, {
            duration: 800,
            easing: 'easeInSine'
        });
    });
*/
    $(".fadeload").hover(function() {
        $(this).animate({
            opacity: 1
        });
    }, function() {
        $(this).stop(true, true).animate({
            duration: 800,
            easing: 'easeInSine'
        });
    });
});


// Fade hover
$(function() {
    $(".fadeover").hover(function() {
        $(this).animate({
            opacity: 0.2
        });
    }, function() {
        $(this).stop(true, true).animate({
            opacity: 1
        });
    });
});

// Fade hover image link Video, Image or Document... ?
/*
$j(function() {
    // Others
    $j(".hover a").addClass("link_blog");
    // Image
    $j(".hover a[href$='.png'], .hover a[href$='.jpg'], .hover a[href$='.jpeg']").removeClass("link_blog").addClass("link_img");
    // Video
    $j(".hover a[href$='.swf'], .hover a[href$='.mov'], .hover a[href$='.rft']").removeClass("link_blog").addClass("link_vid");
    // Docs
    $j(".hover a[href$='.pdf']").removeClass("link_blog").addClass("link_doc");

    $j(".blog_post_type3 .hover a").addClass("link_blog");
    $j(".blog_post_type2 .hover a").addClass("link_blog");
    $j(".blog_post_type1 .hover a").addClass("link_blog");
    $j(".blog_post_type4 .hover a").addClass("link_blog");
});
*/