Javascript JQuery fadeIn/fadeOut在左侧悬停

我试图得到一个淡入淡出效果时，悬停，但它似乎不工作

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

css:

演示：

我已经更新了您的

您没有将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");
     });
});

我已经更新了你的

您没有将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");
     });
});

---

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

HTML代码

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

.text_menu_slide{
    display:none;
}

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

jQuery代码

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

.text_menu_slide{
    display:none;
}

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

---

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

HTML代码

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

.text_menu_slide{
    display:none;
}

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

jQuery代码

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

.text_menu_slide{
    display:none;
}

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

---

您的代码中有3个问题

第1期：包括jQuery库

第2期：从代码下方删除

显示：内联

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

问题3实际上不是问题，而是针对您想要的行为，将

div

.text\u菜单滑动到
span

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

请参阅

编辑：2

.icon\u菜单
是块级元素，用于在css下方使其内联，或者您可以始终使用内联元素（如span）

代码中有3个问题

第1期：包括jQuery库

第2期：从代码下方删除
显示：内联

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

问题3实际上不是问题，而是针对您想要的行为，将
div
.text\u菜单滑动到
span

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

请参阅

编辑：2

.icon\u菜单
是块级元素，用于在css下方使其内联，或者您可以始终使用内联元素（如span）

第一件事

你的小提琴没有jQuery

第二,

你有。图标菜单：在你的css中悬停。这阻碍了效果。拆下这条线，它就会工作

这是新的css

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

这是小提琴链接

[编辑]
根据评论，您希望从隐藏开始

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

.text_menu_slide{
 display:none;
}

更新的小提琴
第一件事

你的小提琴没有jQuery

第二,

你有。图标菜单：在你的css中悬停。这阻碍了效果。拆下这条线，它就会工作

这是新的css

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

这是小提琴链接

[编辑]
根据评论，您希望从隐藏开始

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

.text_menu_slide{
 display:none;
}

更新的Fiddle
HTML

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

JS

.text_menu_slide{
    display:none;
}

别忘了用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();
    });        
});

HTML

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

JS

.text_menu_slide{
    display:none;
}

别忘了用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();
    });        
});

略加改写


HTML
CSS
略加改写


HTML
CSS
在您的小提琴中，您不引用jquery库，而且css
display:inline
可能会覆盖fadein/out效果哦，糟糕。这里：但还是有点奇怪。这个怎么样？我不想要那样的宽度。解决办法是把浮子放在一边：两个都放一边，它就成功了！在您的小提琴中，您不引用jquery库，而且css
display:inline
可能会覆盖fadein/out效果哦，糟糕。这里：但还是有点奇怪。这个怎么样？我不想要那样的宽度。解决办法是把浮子放在一边：两个都放一边，它就成功了！如果宽度不是100%，那么它仍然位于顶部。我如何限制它仅对x悬停作出反应，而不是对x旁边页面的整个宽度作出反应？@Gadgetster问题是您使用了一个div作为图标菜单容器。您需要将此设置为内联或使用不同的元素，例如
，或者使用超链接包装X，并设置悬停目标。如果宽度不是100%，则悬停目标仍然位于顶部。我如何限制它仅对X悬停作出反应，而不是对X旁边页面的整个宽度作出反应？@Gadgetster问题是您使用了div作为图标菜单容器。您需要将其内联或使用不同的元素，例如
，或使用超链接包装X，并使悬停目标从隐藏开始！我不认为这里有必要重复（在CSS中）。；）如何使它只对x上的悬停作出反应？虽然你可以这样做，但这不是一件很好的事情。当注销将淡出，然后再次悬停你的x将被调用，这将导致它在无限循环我希望它从隐藏开始！我不认为这里有必要重复（在CSS中）。；）如何使它只对x上的悬停作出反应？虽然你可以这样做，但这不是一件很好的事情。当注销将淡出，然后再次悬停你的x将被调用，这将导致它在无限循环的转移是好的，它实际上将在我的网站上的屏幕右侧。如何使其仅对x上的悬停而不是该线的整个宽度作出反应？使用.icon_菜单{display:inline；}在CSSUpdated my lab Demo中，请检查其是否良好添加
。在fadeIn/fadeOut之前停止（true，true）
。请更新我的演示check@Gadgetster虽然答案已被您接受，但您还需要什么？；）移动很好，它实际上会在我的网站屏幕的右侧。如何使它只对x上的悬停而不是该行的整个宽度作出反应？在CSSU中使用.icon_菜单{display:inline；}