如何在懸停適當交叉淡入淡出文字與jQuery

http://jsfiddle.net/mplungjan/8wf5E/（現在的工作 - 使用.hover（））如何在懸停適當交叉淡入淡出文字與jQuery

的上空盤旋衰落的div時，因爲觸發鼠標移開並在明顯失敗之後我只需要實際的。文字淡入淡出，包裝div只用於遏制和調試。沒有位置：A液絕對是首選

<div id="container"> 
    <div id="one" class="fade">One</div> 
    <div id="two" class="fade">Two</div> 
</div> 

$(document).ready(function() { 
    $("#container").mouseover(function() { 
    $("#one").fadeOut("slow"); 
    $("#two").fadeIn("slow"); 
    }).mouseout(function() { 
    $("#two").fadeOut("slow"); 
    $("#one").fadeIn("slow"); 
    });; 
}); 

div { margin:3px; width:80px; height:80px; float:left; } 
div#container { width: 100px; height:100px; border:1px solid black} 
div#one { position:absolute; border:1px solid red;} 
div#two { position:absolute; border:1px solid green; display:none; }

來源

2011-05-25 mplungjan

看到這個：http://stackoverflow.com/questions/3670487/jquery-text-fade-transition-from-one-text-to-another – doremi 2011-05-25 17:29:51

@Joshua - 不完全。第一種解決方案在淡出後淡入淡出，下一個解決方案很好地淡入淡出，但不會懸停，只需使用區間 – mplungjan 2011-05-25 17:32:51

我會建議使用hover功能這種功能...

$(document).ready(function() { 
    $("#container").hover(
    function(e) { 
     $("#one").fadeOut("slow"); 
     $("#two").fadeIn("slow"); 
    }, 
    function(e) { 
     $("#two").fadeOut("slow"); 
     $("#one").fadeIn("slow");  
    } 
); 
});

它fixes這個特殊問題。

來源

2011-05-25 17:38:05

Okee，這就是我所看到和解僱的。但這是更好的解決方案 – mplungjan 2011-05-25 17:42:10

我認爲你正在尋找此jQuery代碼：

$(document).ready(function() { 
    $("#container").mouseenter(function() { 
    $("#one").fadeOut("slow"); 
    $("#two").fadeIn("slow"); 
    }).mouseleave(function() { 
    $("#two").fadeOut("slow"); 
    $("#one").fadeIn("slow"); 
    });; 
});

編輯：您還可以用它一點點CSS3魔術;）

div { margin:3px; width:80px; height:80px; float:left; } 
div#container { width: 100px; height:100px; border:1px solid black} 
div#one { position:absolute; border:1px solid red;-webkit-transition:opacity 0.5s ease-in-out;} 
div#two { position:absolute; border:1px solid green; opacity:0;-webkit-transition:opacity 0.5s ease-in-out; } 

div#container:hover #two{ 
opacity:1;} 
div#container:hover #one{ 
opacity:0;}

=>http://jsfiddle.net/3WZKx/1/

來源

2011-05-25 17:28:47 Jibou

工作小提琴：http://jsfiddle.net/3WZKx/ – drudge 2011-05-25 17:31:49

這正是我所知道的。謝謝 – mplungjan 2011-05-25 17:34:04

任何機會，我們可以使它的工作沒有立場：絕對？ – mplungjan 2011-05-25 17:40:26

使用mouseleave()代替mouseout()似乎更好。
參見here。

來源

2011-05-25 17:29:40

看@Jibou的建議。作品。謝謝 – mplungjan 2011-05-25 17:34:38

如何在懸停適當交叉淡入淡出文字與jQuery

回答

相關問題