2

我正在为我的投资组合网站制作一个页面，该页面显示各种服务。三列的中心列有一个大框。中央框的左右是每列 3 个框。每个框都是一个可点击的链接，然后可以更改中央块中的内容。

我正在尝试使用 jQuery 使中央框两侧的框在高度上增长mouseover并在 mouseout 上缩小.animate()。

我的问题是盒子非常痉挛。当你mouseout一个人去另一个人时，有时它会缩小，然后长大，然后又缩小。我怎样才能迫使他们第二次停止增长和缩小？

这是相关页面的链接：http ://www.nukamedia.com/beta/services.html

这是jQuery代码： 

    var classes = ".how-it-works, .built-for-power, .done-on-time, .inform-your-customers, .spread-the-word, .keep-in-contact";
    $(classes).on("mouseover", function() {
            $(this).animate({height: '+=20px'},500);
    });
    $(classes).on("mouseout", function() {
            $(this).animate({height: '-=20px'},500);
    });

这是 HTML 标记：

<div class="services-content container">
    <div class="row">
        <div class="left-control-squares twocol">
            <div class="how-it-works box-defaults">
                <a href="" id="works"></a>
                Learn<br/>
                How It<br/>
                <span>Works</span>
            </div>
            <div class="built-for-power box-defaults box-text-align">
                <a href="javascript: changeContent('power');" id="power"></a>
                Built For<br/>
                <span>Power</span>
            </div>
            <div class="done-on-time box-defaults box-text-align">
                <a href="javascript: changeContent('time');" id="time"></a>
                Done On<br/>
                <span>Time</span>
            </div>
        </div>

        <div class="eightcol" id="content-square">
            <img src="images/click-to-learn.png" />
        </div>

        <div class="right-control-squares  twocol last">
            <div class="inform-your-customers box-defaults">
                <a href="javascript: changeContent('customers');" id="customers"></a>
                Inform<br/>
                Your<br/>
                <span>Customers</span>
            </div>
            <div class="spread-the-word box-defaults box-text-align">
                <a href="javascript: changeContent('word');" id="word"></a>
                Spread The<br/>
                <span>Word</span>
            </div>
            <div class="keep-in-contact box-defaults box-text-align">
                <a href="javascript: changeContent('contact');" id="contact"></a>
                Keep In<br/>
                <span>Contact</span>
            </div>
        </div>
    </div>
</div>
4

1 回答 1

4

您应该考虑使用 jQuery stop() 函数。这将停止动画的轨迹。

$("#myelm").stop().animate({height : "300px"});
于 2012-11-27T04:24:21.720 回答