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

更新：根据与您交谈，了解更新解决方案的底部。

为您工作的代码：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/

注意我已经删除了一些方法，上次选中的图像在删除鼠标时被选中（不受欢迎），但这可能适合你。

Answer 2

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

jquery同时悬停fadein fadeout

2 个答案: