JQuery fadeIn/fadeOut on hover from the left

Question

I am trying to get a fadeIn and fadeOut effect when hovering but it doesn't seem to work!

<div class="icon_menu">
    <div class="text_menu_slide">Logout</div> x
</div>

jquery:

$(function(){
    $(".icon_menu").hover(function(){
        $(this).find(".text_menu_slide").fadeIn();
    },function(){
        $(this).find(".text_menu_slide").fadeOut();
    });        
});

css:

.text_menu_slide{
    display:none;
}
.icon_menu:hover .text_menu_slide, .icon_menu{
    display:inline;     
}

DEMO: http://jsfiddle.net/XwnGA/

Answer 1

The display:inline css code is not required. At the frameworks and extensions where No Library is displayed select any of jQuery versions. Moreover you can use a span tag instead of div.

HTML CODE

<div class="icon_menu">
    <span class="text_menu_slide">Logout</span> x
</div>

CSS CODE

.text_menu_slide{
    display:none;
}

jQuery CODE

$(function(){
    $(".icon_menu").hover(function(){
        $(this).find(".text_menu_slide").fadeIn();
    },function(){
        $(this).find(".text_menu_slide").fadeOut();
    });        
});

JSFIDDLE DEMO

Answer 2

There are 3 Issue in your code

Issue 1 : Include jQuery lib

Issue 2 : Remove Display: inline from Below Code

.icon_menu:hover .text_menu_slide, .icon_menu{
  /* display:inline*/   /*Remove this as this overwrite JS fadeIn */
}

Issue 3 Not actually a issue but for the behavior you want make the div .text_menu_slide to span

NOTE You can also move the X before span ti avoid the shifting

See the LAB DEMO

Edit:2

The .icon_menu is Block level element use Below css for making it inline Or you can always use inline elements (such as span)

.icon_menu{
  display:inline; 
}

Answer 3

I have updated your fiddle

you didnt included the jquery file in it.

$(function(){
$(".icon_menu").hover(function(){
    $(this).find(".text_menu_slide").fadeOut( "slow");
});        
});
$(function(){
$(".icon_menu").mouseout(function () {
    $(this).find(".text_menu_slide").fadeIn( "slow");
     });
});

Answer 4

First thing

Your fiddle didn't had jQuery.

Second,

You have .icon_menu:hover in your css. This is hindering the effect. Remove this line and it works.

Here is the new css

.text_menu_slide{
display:none;
}
.icon_menu .text_menu_slide, .icon_menu{
   display:inline;  
}

Here is the fiddle link http://jsfiddle.net/2yu52/

[EDIT] As per the comment, you want to start from hidden

Change div to span and then have this css.

.text_menu_slide{
 display:none;
}

Updated Fiddle http://jsfiddle.net/2yu52/1/

Answer 5

$(function(){
   $(".icon_menu").hover(function(){
      $(this).find(".text_menu_slide").fadeOut( "slow");
   });        
});
$(".icon_menu").mouseout(function () {
    $(this).find(".text_menu_slide").fadeIn( "fast");
});

Answer 6

HTML

<div class="icon_menu">
    <span class="text_menu_slide">Logout</span> x
</div>

CSS

.text_menu_slide{
    display:none;
}

JS

Dont forget to clear queue with stop() to avoid animation repeat.

$(function(){
    $(".icon_menu").hover(function(){

        $(this).find(".text_menu_slide").stop(true, true).fadeIn();
    },function(){

        $(this).find(".text_menu_slide").stop(true, true).fadeOut();
    });        
});

Answer 7

Slightly rewritten.

http://jsfiddle.net/XwnGA/22/

HTML

<div class="icon_menu">
    <div class="text_menu_slide">Logout</div> x
</div>

jQuery

$(".icon_menu").mouseover(function() {$(".text_menu_slide").stop().animate({opacity: 1}, 300)});
$(".icon_menu").mouseleave(function() {$(".text_menu_slide").stop().animate({opacity:0}, 500)});

CSS

.icon_menu * {display: inline;}
.text_menu_slide {opacity: 0;}