JQuery Анимация Проблема на Mouseenter
Так что я наткнулся на кодирование этого небольшого раздела сайта, но он немного глючит. Я знаю достаточно jquery, чтобы быть опасным, но я надеюсь, что кто-нибудь поможет мне сделать это лучше и эффективнее.
Вот то, что я думаю, может улучшить это, но я не знаю, как это сделать:
- После переезда по первому городу, при переходе к следующему, он не должен возвращать все остальные маркеры и затем скрывать их заново. Он должен просто скрыть маркер, на котором вы были, а затем показать тот, над которым вы сейчас находитесь, но при наведении мыши и задержке он возвращает все маркеры.
- В настоящее время, если вы переходите от одного ролловера к другому в довольно быстром темпе, анимация, похоже, выходит из-под контроля.
- Это бонус, но я изначально представлял, что маркеры будут анимироваться в увеличенном порядке, а не в одно и то же время. Может быть случайным или может быть определено. Я думаю, что это сделает анимацию более плавной. Я полагаю, что это вызовет цикл, но, как я упоминал ранее, я знаю только достаточно, чтобы быть опасным.
Вот ссылка на страницу: 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>
2 ответа
Понял (02:31 лучше)! (сейчас работаю над случайной версией... Мне нравится вызов!)
РЕДАКТИРОВАТЬ (см. 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>
РЕДАКТИРОВАТЬ (удалено relid как параметр в removeLastPin)
Вы можете проверить это здесь: http://zequinha-bsb.int-domains.com/map/randomCities.html
Этот пример должен прояснить ситуацию для вас.
Вам нужно привязать событие к контейнеру, в котором находятся города. Когда мышь покидает этот контейнер, вы хотите показать все города заново. Я также использовал лучший селектор 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 });
});