jQueryアニメーションの問題点マウスのキーボード

Question

私はサイトのこの小さな部分をコーディングして自分の道を見つけましたが、少しバギーです。私は危険なほど十分なjqueryを知っていますが、私はこれをより良く効率的にするのに役立つことを望んでいます。

1. 最初の都市をロールオーバーした後、次へと移動するとき、それは は、他のすべてを戻すべきではありません。ここで

   は、私はこれを改善するが、私はこれらを達成するためにどのようには考えていると思うものですそれらを再び隠すことができます。それは だけあなたがしていたマーカーを非表示にして、あなたが現在 ているものを表示する必要がありますが、mouseoutとすべてのマーカーを戻す遅延。あなたはやや 急速なペースの次に1つのロールオーバーから行く場合

2. 現在、アニメーションは、これはボーナスです
3. アウトかつらようだが、私はもともと視覚化し、そのマーカーだろうインクリメント順ではなく、中 アニメーションすべて同時に。 ランダムでも、定義することもできます。私は アニメーションをより流動的に見せると思う。私はこれがループを呼び出すことを理解している しかし、私が以前に言及したように、私は危険であると知っています。

ここのページへのリンクです：http://204.12.117.109/~sandbox/map/

はここに私が使用しているjQueryのコードです：

$(function() { 
     $('.city').mouseenter(function(){ 

      var relid = $(this).attr('rel'); 

      $("#communities div[id!=" + relid + "].pin").animate({ 
       opacity: 0, 
       top: '-=40', 
       }, 500); 
     }); 
     $('.city').mouseleave(function(){ 

      var relid = $(this).attr('rel'); 

      $("#communities div[id!=" + relid + "].pin").animate({ 
       opacity: 1, 
       top: '+=40', 
       }, 500, 'easeOutBounce'); 
     }); 
    }); 

はここに私が使用しているCSSです：

#communities { background: url(images/bgCommunities.gif) scroll bottom right no-repeat; position: relative; } 
    #communities .lists { width: 340px !important; } 
    #cities li { width: 160px !important; margin: 0px 2px !important; padding: 4px 0 4px 4px; } 
    #cities li:hover { background-color: rgb(240,240,240); } 
     #boyle, #long, #santa, #rich, #fres, #sac, #city, #sLA, #coach, #kern, #oak, #merc, #sal, #del { position: absolute; width: 8px; height: 12px; background: url(images/pin.png) 0 0 no-repeat; } 
     #boyle { top: 230px; right: 95px; } 
     #long { top: 241px; right: 92px; } 
     #santa { top: 236px; right: 84px; } 
     #rich { top: 139px; right: 165px; } 
     #fres { top: 173px; right: 121px; } 
     #sac { top: 133px; right: 147px; } 
     #city { top: 258px; right: 78px; } 
     #sLA { top: 235px; right: 90px; } 
     #coach { top: 239px; right: 62px; } 
     #kern { top: 206px; right: 105px; } 
     #oak { top: 148px; right: 162px; } 
     #merc { top: 161px; right: 136px; } 
     #sal { top: 171px; right: 155px; } 
     #del { top: 71px; right: 185px; } 

は、

私が使用しているHTMLは次のとおりです：

<div id="communities"> 
<div class="lists"> 
    <ul id="cities"> 
     <li class="city" rel="boyle"><a href="#">Boyle Heights</a></li> 
     <li class="city" rel="long"><a href="#">Long Beach</a></li> 
     <li class="city" rel="santa"><a href="#">Central Santa Ana</a></li> 
     <li class="city" rel="rich"><a href="#">Richmond</a></li> 
     <li class="city" rel="fres"><a href="#">Central/SE/SW Fresno</a></li> 
     <li class="city" rel="sac"><a href="#">Sacramento</a></li> 
     <li class="city" rel="city"><a href="#">City Heights</a></li> 
     <li class="city" rel="sLA"><a href="#">South Los Angeles</a></li> 
     <li class="city" rel="coach"><a href="#" >Coachella Valley</a></li> 
     <li class="city" rel="kern"><a href="#">South Kern</a></li> 
     <li class="city" rel="oak"><a href="#">East Oakland</a></li> 
     <li class="city" rel="merc"><a href="#">SW Merced/East Merced</a></li> 
     <li class="city" rel="sal"><a href="#">East Salinas (Alisal)</a></li> 
     <li class="city" rel="del"><a href="#">Del Norte County</a></li> 
    </ul> 
</div> 
<div class="pin" id="boyle"></div> 
<div class="pin" id="long"></div> 
<div class="pin" id="santa"></div> 
<div class="pin" id="rich"></div> 
<div class="pin" id="fres"></div> 
<div class="pin" id="sac"></div> 
<div class="pin" id="city"></div> 
<div class="pin" id="sLA"></div> 
<div class="pin" id="coach"></div> 
<div class="pin" id="kern"></div> 
<div class="pin" id="oak"></div> 
<div class="pin" id="merc"></div> 
<div class="pin" id="sal"></div> 
<div class="pin" id="del"></div> 

Answer 1

この例では、問題が解決するはずです。あなたがする必要がどのような

http://jsfiddle.net/wJnr5/3

都市を保持するコンテナにイベントをバインドしています。マウスがこのコンテナを離れるときは、すべての都市を再表示したいときです。私はまた、現在の都市を除くすべてを取得するために、より良いjQueryセレクタを使用しました。

$('.city').bind('mouseenter', 
    function() { 
     //fade out everyone but me 
     $('.city').not($(this)).each(function() {        
      $(this).stop().delay(Math.floor(Math.random()*1000)).animate({ opacity: 0 }); 
     }); 
     //fade me in 
     $(this).stop().animate({ opacity: 1 }); 
    } 
); 

$('#container').bind('mouseleave', function() { 
    $('.city').stop().animate({ opacity: 1 });  
}); 

Answer 2

これを取得しました（02：31est）！ （今ランダムバージョンに取り組んで...私は挑戦が好き！）：

EDIT（http://zequinha-bsb.int-domains.com/map/cities.htmlを参照）

は、EST（私は時間によって支払われています3時29分午前@それを2を手に入れました...かまったく？） ランダムなバージョンが下部にあり、それぞれのリンクがあります。

<script type="text/javascript"> 

    var firstEntry = true; 
    var lastOn = ''; 

    function showAllPins() { 
     if ($('#communities').hasClass('theMouseIsOff')) { 
      $("#communities div[id!=''].pin").animate({ 
       opacity: 1, 
       top: '+=40', 
      }, 500, 'easeOutBounce'); 
      firstEntry = true; 
      $('#communities').removeClass('theMouseIsOff'); 
     } 
    } 
    function showPin(relid){ 
     lastOn = relid; 
     if ($('#communities').hasClass('theMouseIsOff')) $('#communities').removeClass('theMouseIsOff'); 
     if (firstEntry == true) { 
      $("#communities div[id!=" + relid + "].pin").animate({ 
       opacity: 0, 
       top: '-=40', 
      }, 500); 
      firstEntry = false; 
     } else { 
      $("#communities div[id=" + relid + "].pin").animate({ 
       opacity: 1, 
       top: '+=40', 
      }, 500, 'easeOutBounce'); 
     } 
    } 
    function removeLastPin() { 
     $('#communities').addClass('theMouseIsOff'); 
     $("#communities div[id=" + lastOn + "].pin").animate({ 
      opacity: 0, 
      top: '-=40', 
     }, 500); 
     setTimeout('showAllPins()',5000); 
    } 

    $(document).ready(function() { 
     $('.city').mouseenter(function() { 
      relid = $(this).attr('rel'); 
      showPin(relid); 
     }).mouseleave(function() { removeLastPin() }); 
    }); 

</script> 

ランダムバージョン：（removeLastPinのパラメータとしてRELID削除）

<script type="text/javascript"> 

    var firstEntry = true; 
    var lastOn = ''; 

    function showAllPins() { 
     if ($('#communities').hasClass('theMouseIsOff')) { 
      var citiesArr = []; 
      $('.pin').each(function() { 
       citiesArr.push(this.id); 
       $('#'+this.id).hide(); 
      }); 
      var stillHidden = citiesArr.length; 
      while (stillHidden > 0) { 
       var a = Math.floor(Math.random()*citiesArr.length); 
       if ($('#'+citiesArr[a]).is(':hidden')) { 
        $('#'+citiesArr[a]).show().delay(Math.floor(Math.random()*900)).animate({ 
         opacity: 1, 
         top: '+=40', 
        }, Math.floor(Math.random()*900), 'easeOutBounce'); 
        stillHidden--; 
       } 
      } 
      firstEntry = true; 
      $('#communities').removeClass('theMouseIsOff'); 
     } 
    } 
    function showPin(relid){ 
     lastOn = relid; 
     if ($('#communities').hasClass('theMouseIsOff')) $('#communities').removeClass('theMouseIsOff'); 
     if (firstEntry == true) { 
      $("#communities div[id!=" + relid + "].pin").animate({ 
       opacity: 0, 
       top: '-=40', 
      }, 500); 
      firstEntry = false; 
     } else { 
      $("#communities div[id=" + relid + "].pin").animate({ 
       opacity: 1, 
       top: '+=40', 
      }, 500, 'easeOutBounce'); 
     } 
    } 
    function removeLastPin() { 
     $('#communities').addClass('theMouseIsOff'); 
     $("#communities div[id=" + lastOn + "].pin").animate({ 
      opacity: 0, 
      top: '-=40', 
     }, 500); 
     setTimeout('showAllPins()',2000); 
    } 

    $(document).ready(function() { 
     $('.city').mouseenter(function() { 
      relid = $(this).attr('rel'); 
      showPin(relid); 
     }).mouseleave(function() { removeLastPin() }); 
    }); 

</script> 

EDIT

あなたがここでそれを確認することができます：http://zequinha-bsb.int-domains.com/map/randomCities.html