jquery懸停淡出淡出同時

Question

我有圓形菜單，它必須淡出和淡出。工作示例是在這裏：

http://93.103.24.208:8080/sagita/ 

（只有「參考」和「storitve」）

第一個問題是，每個衰落等待，直到最後一站。那麼，如果我從「參考」到「storitve」，兩者都同時淡出工作，我該怎麼做？

第二個問題是在Firefox真是奇怪的行爲 - 這在圈子裏運行，或停止或..

下面是代碼：

$(function(){ 
    $('#areastoritve').hover(
     function(){ 
      $imgURL = "fileadmin/template/images/index/storitve.png"; 
       $("#ozadje") 
       .fadeOut(0, function() {$("#ozadje").attr('src',$imgURL);}) 
       .fadeIn({ duration: 800, queue: true }) 
     }, 
     function(){ 
      $imgURL = "fileadmin/template/images/index/ozadjeKrog.png"; 
       $("#ozadje") 
       .fadeOut(800, function() {$("#ozadje").attr('src',$imgURL);}) 
       .fadeIn({ duration: 0, queue: true }) 
     } 
    ); 

    $('#areareference').hover(
     function(){ 
      $imgURL = "fileadmin/template/images/index/reference.png"; 
       $("#ozadje") 
       .fadeOut(4, function() {$("#ozadje").attr('src',$imgURL);}) 
       .fadeIn(800); 
     }, 
     function(){ 
      $imgURL = "fileadmin/template/images/index/ozadjeKrog.png"; 
       $("#ozadje") 
       .fadeOut(800, function() {$("#ozadje").attr('src',$imgURL);}) 
       .fadeIn(4); 
     } 
    ); }); 


HTML: 

<div style="width:602px; position:relative;" class="imageMap"> 
     <img src="images/index/ozadjeKrog.png" id="ozadje" width="602" height="602" usemap="#image_map" border="0"> 

       <map name="image_map" id="image_map"> 
        <area id="areastoritve" shape="poly" coords=" 300,302, 299,302, 297,301, 453,38, 491,64, 519,90, 546,123, 569,158, 585,196, 596,231, 601,258, 601,280, 601,301, 302,301" href="http://93.103.24.208:8080/sagita/storitve" alt="Storitve" title="Storitve"/> 
        <area id="areaonas" shape="poly" coords=" 296,300, 150,39, 184,23, 212,14, 237,6, 264,2, 267,0, 331,1, 385,11, 418,22, 451,38, 298,297" href="http://93.103.24.208:8080/sagita/o_nas" alt="O nas" title="O nas"/> 
        <area shape="poly" coords=" 296,303, 0,306, 5,250, 18,196, 40,149, 71,104, 108,70, 136,47, 148,40, 294,302" href="http://93.103.24.208:8080/sagita/posamezniki" alt="Posamezniki" title="Posamezniki"/> 
        <area shape="poly" coords=" 296,307, 0,310, 0,336, 6,365, 14,396, 31,439, 58,484, 89,519, 125,549, 147,568, 292,311" href="http://93.103.24.208:8080/sagita/kontakt" alt="Kontakt" title="Kontakt"/> 
        <area shape="poly" coords=" 300,308, 453,567, 419,583, 369,598, 347,601, 265,601, 208,590, 153,568, 297,310" href="http://93.103.24.208:8080/sagita/galerija" alt="Galerija" title="Galerija"/> 
        <area id="areareference" shape="poly" coords=" 303,307, 458,566, 522,511, 560,462, 589,397, 601,345, 601,305, 302,305" href="http://93.103.24.208:8080/sagita/reference" alt="Reference" title="Reference"/> 
       </map> 
     </div> 

Answer 1

關於第一個問題，你需要停止（真，true）你的動畫在應用新的動畫之前，這將停止抖動效果。

Answer 2

更新：根據與您的交談，查看底部更新的解決方案。你

---

工作代碼：http://jsfiddle.net/SymN8/

您需要stop方法添加到您的fadeIn和fadeOut。在jQuery中，這可用於清除正在執行操作的元素上的當前動畫隊列。通過將stop(true,true)添加到您的操作中，將清除隊列並僅執行最後一次操作。

點擊此處瞭解詳情：http://api.jquery.com/stop/

這裏是更新代碼。請注意，我添加了一個額外的DIV來保存懸停圖像。

Javascript

$(function(){ 
    $('#areastoritve').hover(
    function(){ 
     $imgURL = "http://93.103.24.208:8080/sagita/fileadmin/template/images/index/storitve.png"; 
      $("#ozadje2").stop(true, true) 
      .fadeOut(0, function() {$("#ozadje2").attr('src',$imgURL);}) 
      .fadeIn({ duration: 800}) 
    }, 
      function(){ 
      $imgURL = "http://93.103.24.208:8080/sagita/fileadmin/template/images/index/ozadjeKrog.png"; 
      $("#ozadje2").stop(true) 
      .fadeOut(800, function() {$("#ozadje2").attr('src',$imgURL);}) 
      .fadeIn({ duration: 0}) 
    } 
); 

$('#areareference').hover(
    function(){ 
     $imgURL = "http://93.103.24.208:8080/sagita/fileadmin/template/images/index/reference.png"; 
      $("#ozadje2").stop(true) 
      .fadeOut(4, function() {$("#ozadje2").attr('src',$imgURL);}) 
      .fadeIn(800); 
    }, 
    function(){ 
     $imgURL = "http://93.103.24.208:8080/sagita/fileadmin/template/images/index/ozadjeKrog.png"; 
      $("#ozadje2").stop(true) 
      .fadeOut(800, function() {$("#ozadje2").attr('src',$imgURL);}) 
      .fadeIn(4); 
    } 
); }); 

HTML

<div style="width:602px; position:relative;" class="imageMap"> 
<img src="http://93.103.24.208:8080/sagita/fileadmin/template/images/index/ozadjeKrog.png" id="ozadje2" width="602" height="602" usemap="#image_map" border="0" style="position:absolute" usemap="#image_map"> 
    <img src="http://93.103.24.208:8080/sagita/fileadmin/template/images/index/ozadjeKrog.png" id="ozadje" width="602" height="602" border="0"> 
<map name="image_map" id="image_map"> 
       <area id="areastoritve" shape="poly" coords=" 300,302, 299,302, 297,301, 453,38, 491,64, 519,90, 546,123, 569,158, 585,196, 596,231, 601,258, 601,280, 601,301, 302,301" href="http://93.103.24.208:8080/sagita/storitve" alt="Storitve" title="Storitve"/> 
       <area id="areaonas" shape="poly" coords=" 296,300, 150,39, 184,23, 212,14, 237,6, 264,2, 267,0, 331,1, 385,11, 418,22, 451,38, 298,297" href="http://93.103.24.208:8080/sagita/o_nas" alt="O nas" title="O nas"/> 
       <area shape="poly" coords=" 296,303, 0,306, 5,250, 18,196, 40,149, 71,104, 108,70, 136,47, 148,40, 294,302" href="http://93.103.24.208:8080/sagita/posamezniki" alt="Posamezniki" title="Posamezniki"/> 
       <area shape="poly" coords=" 296,307, 0,310, 0,336, 6,365, 14,396, 31,439, 58,484, 89,519, 125,549, 147,568, 292,311" href="http://93.103.24.208:8080/sagita/kontakt" alt="Kontakt" title="Kontakt"/> 
       <area shape="poly" coords=" 300,308, 453,567, 419,583, 369,598, 347,601, 265,601, 208,590, 153,568, 297,310" href="http://93.103.24.208:8080/sagita/galerija" alt="Galerija" title="Galerija"/> 
       <area id="areareference" shape="poly" coords=" 303,307, 458,566, 522,511, 560,462, 589,397, 601,345, 601,305, 302,305" href="http://93.103.24.208:8080/sagita/reference" alt="Reference" title="Reference"/> 
      </map> 
    </div> 

---

這是接近我可以帶你當前DOM結構。 http://jsfiddle.net/SymN8/22/

注意我已經刪除了一些你的方法，當鼠標被移除（不受歡迎）時，上次選擇的圖像保持選中狀態，但也許這適用於你。