Mouseenter上的jQuery动画问题

时间：2011-11-16 03:30:06

标签： jquery animation rel

所以我偶然发现了对网站的这个小部分进行编码，但它有点儿错误。我知道足够的jquery是危险的，但我希望有人可以帮助我使这更好，更有效。

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

  1. 翻过第一个城市后，移动到下一个城市时，它 不应该带回所有其他标记，然后重新隐藏它们。它 应该隐藏你所在的标记，然后显示你所在的标记 目前结束了，但是鼠标输出和延迟会带回所有标记。
  2. 目前，如果你从一个翻转转到下一个翻转 快节奏，动画似乎要退出
  3. 这是一个奖励，但我最初想象的是标记会 以增量顺序动画而不是同时动画。 可以是随机的，也可以是定义的。我认为它会成为 动画看起来更流畅。我认为这会要求循环 但就像我之前提到的，我只知道危险。

    4. 以下是该页面的链接：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 个答案:

答案 0 :(得分：1)

得到它（02：31）！ （现在正在研究随机版......我喜欢挑战！）：

编辑（见http://zequinha-bsb.int-domains.com/map/cities.html）

得到它2 @ 3:29 am 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

答案 1 :(得分：0)

这个例子应该为你解决问题。

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 });    
});
相关问题
最新问题