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

显示：不需要内联css代码。在显示 No Library 的框架和扩展中，选择任何jQuery版本。此外，您可以使用span标记而不是div。

HTML CODE

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

CSS代码

.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

您的代码中有 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

注意您也可以在X之前移动span以避免转移

请参阅 LAB DEMO

修改：2

.icon_menu是块级元素使用下面的css使其内联或者你总是可以使用内联元素（例如span）

.icon_menu{ display:inline; }

Answer 3

我已更新您的fiddle

你没有在其中包含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。

其次，

你有.icon_menu：悬停在你的CSS中。这阻碍了这种效果。删除此行，它的工作原理。

这是新的css

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

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

[编辑] 根据评论，你想从隐藏的

开始

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

JQuery fadeIn / fadeOut从左侧悬停

7 个答案:

HTML

的jQuery

CSS