Question

我正在为我的投资组合网站上展示各种服务的网页。三列的中间栏中有一个大盒子。在中央框的左侧和右侧是每列3个框的列。每个框都是一个可点击的链接，然后更改中央块中的内容。

我正在尝试使中央框两侧的框在mouseover上增长，并使用jQuery .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"});

使jQuery动画Div大小增长

1 个答案: