Question

I am using this jquery to show a div on top of another one when it is hovered over, but for some reason even though it seems to work the fadeIN and fadeOUT don’t work.

if I change the fadeTo to fadeIn and fadeOut respectively then that breaks it as the previous one you hover over dosen’t disappear?

$(function() {
$(".report-hover").hover(
    function() {
        $(this).children("img").fadeTo(200, 0.85).end().children(".report-image-hover").show();
    },
    function() {
        $(this).children("img").fadeTo(200, 1).end().children(".report-image-hover").hide();
    });
});

Markup:

<div class="report-hover">

                <div class="report-image-hover">
                <a href="#">
                <img src="<?php bloginfo('template_url'); ?>/images/.....png" alt="Report" />
                </a>
                </div>

                <img src="<?php bloginfo('template_url'); ?>/images/.....png" alt="Report" />
</div>

Answer 1

Check this: JSfiddle

If you are just replacing FadeTo to FadeIn then it will not work because FadeIn has different parameters. JQuery FadeIn