Question

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.

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().

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

Here’s the jQuery code:

    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);
    });

Here’s the HTML Markup:

<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

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

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