1

フェードインとフェードアウトが必要なサークルメニューがあります。実際の例は次のとおりです。

http://93.103.24.208:8080/sagita/

(「参照」と「ストーリー」のみ)

最初の問題は、各フェージングが最後のフェージングが停止するまで待機することです。では、「参照」から「ストーリー」にまたがる場合、両方のフェードが同時に機能するようにするにはどうすればよいですか?

2 番目の問題は、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/

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/

メソッドの一部を削除したことに注意してください。最後に選択された画像は、マウスを離しても選択されたままになります（望ましくない）が、これでうまくいくかもしれません。

于 2013-01-17T16:09:57.517 に答える
0

最初の問題では、新しいアニメーションを適用する前にアニメーションを停止（true、true）する必要があります。これにより、ジッター効果が停止します。

于 2013-01-17T15:32:18.723 に答える