javascript - 使 jQuery 动画 Div 的大小增长

Question

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

我试图让中央盒子两侧的盒子在 mouseover 上增加高度并使用 jQuery 在 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>      

Answer 1

您应该考虑使用 jQuery stop() 函数。这将使动画停止在其轨道上。

$("#myelm").stop().animate({height : "300px"});