Reputation: 29

jQuery Animation Issue On Mouseenter

So I've stumbled my way through coding this little section of a site, but it's a little buggy. I know just enough jquery to be dangerous, but I'm hoping some one could help me make this better and more efficient.

Here's what I think could improve this but I have no idea how to accomplish these:

After rolling over the first city, when moving to the next, it shouldn't bring back all the other markers and then re-hide them. It should just hide the marker you were on and then show the one you're currently over, but mouseout and a delay it brings back all the markers.
Currently if you go from one rollover to the next in a somewhat rapid pace, the animation seems to wig out
This is a bonus, but I originally visualized that the markers would animate in an incremented order rather than all at the same time. Could be random or it could be defined. I think it would make the animation look more fluid. I figure that this would call for a loop but like I mentioned earlier I only know enough to be dangerous.

Here is the link to the page: http://204.12.117.109/~sandbox/map/

Here is the jquery Code I'm using:

$(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');
        });
    });

Here's the CSS I'm using:

#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; }

Here's the HTML I'm using:

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

Upvotes: 2

Answers (2)

zequinha-bsb

Reputation: 719

Got it (02:31est)! (now working on the random version ... I like a challenge!):

EDIT (see http://zequinha-bsb.int-domains.com/map/cities.html)

Got it 2 @ 3:29am est (am I being paid by the hour ... or at all?) Random version is on the bottom part with it's respective link.

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

The random version:

<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 (removed relid as parameter in removeLastPin)

You can check it here: http://zequinha-bsb.int-domains.com/map/randomCities.html

Upvotes: 1

mrtsherman

Reputation: 39902

This example should clear things up for you.

http://jsfiddle.net/wJnr5/3

What you need to do is bind an event to the container that holds the cities. When the mouse leaves this container is when you want to reshow all the cities. I also used a better jQuery selector to get everything except for the current city.

$('.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 });    
});

Upvotes: 0

jQuery Animation Issue On Mouseenter

Answers (2)

Related Questions