Question

I’m new in javascript and I’ve a problem animating floating elements with jquery and hope someone can help me to fix it.
I would to be able to make a 100% width horizontal accordion.

For this, I have some floating divs in a wrapper. With javascript, i divide the wrapper’s width by the number of divs ( in percentage ). Then, on click, the div selected take the big size and the others the small size. The problem is during the animation, the last div goes at bottom. At the finish, it goes at the good place. I’ve seen the problem depend of the window’s size. In some case, it’s ok, but not always.
Here is a fiddle link : test

I’ve the solution to put the total width at 99% by making the open size for example at 69% instead of 70% but i really need to have it at 100% width and really don’t know how make it.
It could be nice if someone can help me to resolve this problem or find another solution.

PS: excuse my english 🙂

Answer 1

The problem is that you have two independent animations running that are not perfectly synchronized and you expect the total percentage of the two to always be less than 100%. When you start them both at the same time, sometimes this doesn’t happen and as soon as the total goes over 100%, the last one gets pushed to the next row.

The simplest workaround is to slightly delay the one you are growing so the total is always less than 100%. You can see a .delay(50) added to the second animation to make sure the growing element is always behind the shrinking element so the total is always less than 100%. Working demo: http://jsfiddle.net/jfriend00/Fkb5K/.

Snippet of code where .delay(50) was added:

if (!$el.hasClass('current'))
    {

        // Animate other columns to smaller size 
        $otherItems
        .removeClass('curCol')
        .stop(true)
        .animate({ 'width': $closedItemsWidth }, 500, 'linear')
        .css({"cursor":"pointer"});

        // Animate current column to larger size 
        $el
        .addClass('curCol')
        .stop(true)
        .delay(50)
        .animate({ 'width' : $openItemWidth }, 500, 'linear')
        .css({'cursor' : 'default'});

    // Make sure the correct column is current
    $otherItems.removeClass('curCol');
    $el.addClass('curCol');  


    }

Probably the best solution is a custom animation that changes both width percentages in the exact same animation (only one animation, not two) so they are always in perfect sync.

Here’s a custom animation. It removes the animation of the element that you are growing and instead adds a step function callback on all the ones that are shorter. The step function gets call anytime one of the elements changes size in an animation. In that step function, it sums the width of the shorter elements at that point in time and sets the longer one to track it exactly for a perfect sum of 100% every time.

// On click
$grid.delegate('#grid > .col', 'click', function () {
    // Settings
    var $el = $(this);
    var $allItems = $grid.children('.col');
    var $otherItems = $allItems.not($el);

    if (!$el.hasClass('current')) {
        // Animate other columns to smaller size 
        $otherItems.stop(true)
        .removeClass('curCol')
        .animate({ 'width': $closedItemsWidth}, {step: function(prop, fx) {
            var cumWidth = 0;
            var item = this;
            $otherItems.each(function() {
                // haven't changed the width of this item yet, so use new width
                if (this == item) {
                    cumWidth += fx.now;
                } else {
                    cumWidth += parseFloat(this.style.width);
                }
            });
            $el.css({width: (100 - cumWidth) + '%'});
        }, duration: 500 }, 'linear')
        .css({"cursor":"pointer"});

        // Animate current column to larger size 
        $el.addClass('curCol').css({'cursor' : 'default'});
    }
})​

Working demo here: http://jsfiddle.net/jfriend00/7zubL/