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/

注意我已经删除了一些你的方法，当鼠标被移除（不受欢迎）时，上次选择的图像保持选中状态，但也许这适用于你。