jQuery淡入/淡出从左侧悬停

Question

我试图在悬停时获得fadeIn和fadeOut效果，但似乎不起作用！

<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;     
}

演示： http : //jsfiddle.net/XwnGA/

Answer 1

不需要display：inline CSS代码。 在没有显示库的框架和扩展中，选择任何jQuery版本。 此外，您可以使用span标签代替div。

HTML代码

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

CSS代码

.text_menu_slide{
    display:none;
}

jQuery代码

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

JSFIDDLE演示

Answer 2

您的代码中有3个问题

问题1 ：包括jQuery lib

问题2 ：从以下代码中删除Display: inline

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

问题3实际上不是问题，但是对于您要使div .text_menu_slide span的行为

注意您也可以在span ti之前移动X ，以免移位

查看LAB DEMO

编辑：2

.icon_menu是在CSS .icon_menu的块级元素使用，以使其内联，也可以始终使用内联元素（例如span）

.icon_menu{
  display:inline; 
}

Answer 3

我已经更新了你的小提琴

您没有在其中包含jquery文件。

$(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

第一件事

您的小提琴没有jQuery。

第二，

您的CSS中有.icon_menu：hover。 这阻碍了效果。 删除此行即可。

这是新的CSS

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

这是小提琴链接http://jsfiddle.net/2yu52/

[EDIT]根据评论，您要从隐藏开始

将div更改为span，然后使用此CSS。

.text_menu_slide{
 display:none;
}

更新了小提琴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

不要忘记使用stop（）清除队列，以避免动画重复。

$(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

稍微改写。

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;}