CODEWITHSUNDEEP
jqueryfadeineffectsfadeout
Peter
Peter

Reputation: 728

jquery hover fadein fadeout simultaneously

I have circle menu, which has to fadein and fadeout. Working example is here:

http://93.103.24.208:8080/sagita/

(only "reference" and "storitve")

first problem is that each fading waits till the last one stops. So, how do i make that if i cross from "reference" to "storitve", both fading work simultaneously?

The second problem is really strange behavior in Firefox - it runs in circles, or stops or..

Here is the code:

$(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>

Upvotes: 1

Views: 777

Answers (2)

zombiehugs
zombiehugs

Reputation: 717

Update: See bottom for newer solution based on speaking with you.

Working code for you: http://jsfiddle.net/SymN8/

You need to add stop methods to your fadeIn and fadeOut. In jQuery this can be used to clear the current animation queue on the element you are performing the action. By adding the stop(true,true) to you actions this will clear the queue and only perform the last opertion.

More information here: http://api.jquery.com/stop/

Here is the update code. Please note that I have added an additional DIV to hold the hover image.

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>

This is as close as I can take you with your current DOM structure. http://jsfiddle.net/SymN8/22/

Notice I have removed some of your methods, the image that was last selected stays selected when mouse is removed (undesired) but maybe this works for you.

Upvotes: 2

Lowkase
Lowkase

Reputation: 5699

For your first problem you need to stop(true, true) your animations before applying a new animation, this will stop the jitter effect.

Upvotes: 0

Related Questions