关于mouseenter的jQuery动画问题

Question

所以我偶然发现了编写网站的这个小部分的方法，但它有点小错误。我知道jquery足够危险，但我希望有人能帮助我做到更好，更高效。

这是我觉得可以改善这一点，但我不知道如何完成这些：

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）

明白了2 @上午3时29分EST（我被按小时计酬...或在所有？） 随机版本是在它的各自链接的底部。

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

随机版本：

<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（在removeLastPin删除RELID作为参数）

您可以点击此处查看：http://zequinha-bsb.int-domains.com/map/randomCities.html