jQuery fading in an element - not working exactly as i want it to...

Question

Anybody see what's wrong? Doesn't seem to do anything. If i replace

$(this, '.inner').stop(true, false).fadeIn(250);

with

$(.fadeInOnHover .inner').stop(true, false).fadeIn(250);

then all the .inner elements on the page will fade in (which isn't really what i want, as i have ~10 of them). I know it's possible to achieve what i want to do, but i don't know how in this case. Thanks in advance :)

<script type="text/javascript">
$(document).ready(function() {
 $('.fadeInOnHover .inner').css("display","none");

 $('.fadeInOnHover').hover(function() {
  $(this, '.inner').stop(true, false).fadeIn(250);
 }).mouseout(function() {
  $(this, '.inner').stop(true, true).fadeOut(100);
 });
});
</script>

Answer 1

Are you trying to fade the element within this? Something like:

$(this).find('.inner').stop(true, false).fadeIn(250);

Update:

This function doesn't use hover properly:

 $('.fadeInOnHover').hover(function() {
  $(this, '.inner').stop(true, false).fadeIn(250);
 }).mouseout(function() {
  $(this, '.inner').stop(true, true).fadeOut(100);
 });

You need to setup handlers for mouseenter and mouseleave on the hover (as per the documentation). Something like:

$('.fadeInHover').hover(function(){
  $(this).find(".inner").stop(true, false).fadeIn(250);
}, function(){
  $(this).find(".inner").stop(true, true).fadeOut(100);
});

Answer 2

<div class="post-footer fadeInOnHover">
    <div class="inner">
        <a href="remove.php?replyid=20&userid=nike1">
            <img src="images/icons/remove.png" alt="X"/>
            Remove comment
        </a>
    </div>
</div>