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: .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>      

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./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>      

• javascript
• jquery
• html
• css

• mouseenter and mouseleave are better. Also just set a timeout or something so it doesn't happen straight away. – ahren Commented Nov 27, 2012 at 4:08
• It's still very spastic, honestly. I know you're still working on it since clicking the boxes doesn't do anything, but I would add to this animation so positioning. For one, if you work with the positioning you can alter the heights of the boxes without affecting the other elements on the page, which is distracting. It still gives you the intended purpose but will help keep it cleaner. – o_O Commented Feb 20, 2013 at 14:53
• Also, as it is, if you mouse in and out really fast, you aren't canceling the last animation each time, you're just appending new animations each time. This results in the page continuing to perform all of the last animations until pletion instead of just canceling them. So if you mouse over and out really fast, 20 times before it can plete two animations, it should stop but what you have is a box that continues to move until it pletes all 20. – o_O Commented Feb 20, 2013 at 14:55

1 Answer 1

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

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