jquery悬停淡出淡出同时淡出

我有圆形菜单，它必须淡入淡出。工作示例如下：

http://93.103.24.208:8080/sagita/

（仅限“参考”和“存储”）

第一个问题是，每次衰落都会等到最后一次衰落停止。那么，如果我从“参考”到“记忆”，这两个词同时起作用，我该怎么做呢

第二个问题是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>

$（函数（）{
$（'areastoritve'）。悬停(
函数（）{
$imgURL=“fileadmin/template/images/index/storitve.png”；
$（“Ozaje”）
.fadeOut（0，function（）{$（“#ozadge”）.attr（'src'，$imgURL）；}）
.fadeIn（{持续时间：800，队列：true}）
},
函数（）{
$imgURL=“fileadmin/template/images/index/ozadjeKrog.png”；
$（“Ozaje”）
.fadeOut（800，function（）{$（“#ozadge”）.attr（'src'，$imgURL）；}）
.fadeIn（{持续时间：0，队列：true}）
}
); 
$（“#区域引用”）。悬停(
函数（）{
$imgURL=“fileadmin/template/images/index/reference.png”；
$（“Ozaje”）
.fadeOut（4，function（）{$（“#ozadge”）.attr（'src'，$imgURL）；}）
.fadeIn（800）；
},
函数（）{
$imgURL=“fileadmin/template/images/index/ozadjeKrog.png”；
$（“Ozaje”）
.fadeOut（800，function（）{$（“#ozadge”）.attr（'src'，$imgURL）；}）
.fadeIn（4）；
}
);  });
HTML:

对于第一个问题，在应用新动画之前，您需要停止（true，true）动画，这将停止抖动效果。

更新：请参阅底部，了解基于与您交谈的更新解决方案

---

适用于您的工作代码：

您需要将

stop

方法添加到

fadeIn

和

fadeOut

中。在

jQuery

中，这可用于清除正在执行操作的元素上的当前动画队列。通过向您的操作添加

停止（true，true）

，这将清除队列并仅执行最后一个操作

更多信息请点击此处：

这是更新代码。请注意，我添加了一个额外的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

请注意，我已经删除了您的一些方法，上次选择的图像在删除鼠标时保持选中状态（不需要），但这可能对您有效。
但是当我使用.stop（）时，动画过程停止-它没有完成淡入淡出过程，看起来也不正常，特别是当你直接从一个男人到安托弗的时候，皮特请看我的帖子。我已经张贴链接小提琴以及显示它的工作。我也修改了你的代码。正如Lokase所说的，
stop
方法正是您所需要的。我已经在上面向你展示了如何使用它。为你的解决方案干杯吧。现在唯一的问题是两个菜单之间的转换——从fererence到storitve。当您使用鼠标从引用转到storitve时，第一个上的动画将完全停止，但它将继续完全淡出。。下一个应该同时启动。。。我希望你能解开我的意思？问题是所有的
fadeIn
和
fadeOut
操作都是在同一个元素上执行的。理想情况下，你希望所有这些都被分开，这样它们就可以单独行动，可以这样说。是的，那很好，但因为图像是圆形的-菜单在圆形中，我必须更改整个图像。。那么，有没有办法让一个动画继续，并开始另一个？我在读关于创建另一个queu的文章。。但是我不明白。看更新，如果它对你有用，让我知道。我很想知道。是的，我看到在两种元素之间，褪色效果很好。。但是，即使移除鼠标，仍保持选中状态的不良效果是不正常的。。但是谢谢你的帮助。。我不知道这到底是怎么做到的1.我仍然没有找到解决问题的办法。我发现了这个插件：但我不知道如何使它与这个功能一起工作，也许有人知道这是否可能与这个插件有关？
<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>