1

我有圆形菜单，它必须淡入淡出。工作示例在这里：

http://93.103.24.208:8080/sagita/

（只有“参考”和“故事”）

第一个问题是每个衰落都等到最后一个停止。那么，如果我从“reference”跨越到“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>
4

2 回答 2

2

更新：根据与您的交谈，请参阅底部以获取更新的解决方案。

为您工作的代码：http: //jsfiddle.net/SymN8/

您需要向您的and中添加stop方法。在此可用于清除您正在执行操作的元素上的当前动画队列。通过向您添加操作，这将清除队列并仅执行最后一个操作。fadeInfadeOutjQuerystop(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/

请注意，我已经删除了您的一些方法，最后选择的图像在删除鼠标时保持选中状态（不需要），但也许这对您有用。

于 2013-01-17T16:09:57.517 回答
0

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

于 2013-01-17T15:32:18.723 回答