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