使jQuery动画div的大小增长

问题描述

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

I am working on a page for my portfolio website that displays various services. There's a large box in the center column of three columns. On the left and right of the central box are columns of 3 boxes each. Each box is a clickable link that then changes the content in the central block.

我试图使中央框两侧的框增长 mouseover 并使用jQuery .animate（）缩小mouseout。

I'm trying to make the boxes on the sides of the central box grow in height on mouseover and shrink on mouseout using jQuery .animate().

我的问题是盒子是非常痉挛。当你 mouseout 的一个，并去另一个有时它会收缩，然后增长，然后再次收缩。如何强制他们第二次停止增长和收缩？

My problem is that the boxes are very spastic. When you mouseout of one and go to another sometimes it will shrink and then grow and then shrink again. How can I force them to stop growing and shrinking a 2nd time?

这是指向相关页面的链接：

Here's the link to the page in question: 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>

推荐答案

您应该考虑使用jQuery stop这将停止其轨道中的动画。

You should consider using the jQuery stop() function. This will stop the animation in its tracks.

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

这篇关于使jQuery动画div的大小增长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！