CODEWITHSUNDEEP
jquerycss
JaggsWaggert
JaggsWaggert

Reputation: 171

JQuery Animate and CSS transition conflict?

I have two divs floated side by side. They are by default each 50% width. When you hover over a div, the active div grows to 70% and the other div shrinks to 30%.

The JS works fine, except I want to add an easing effect with CSS. When I add the CSS transition, the second div breaks on mouseleave (but only when you mouseleve the entire wrapped element.)

My guess is that the combined widths are temporarily greater than 100%, forcing the second div to be pushed under the first floated div.

Any suggestions on how to fix this issue? The code is below, but here's a fiddle to see the issue in action.

http://jsfiddle.net/gFf3n/1/

You can only replicate the bug by mouseing out of the pink box and out of the wrapper entirely. 

<div class="wrapper">
    <div class="vail">
        <p class="overview"> I work always </p>
    </div>
     <div class="denver"> 
       <p class="overview"> I break when you mouseleave outside of the box, but work when you mouseleave over to the blue box </p>
    </div>
</div>

var $targets = $('.vail, .denver');
$targets.hover(function() {
    $(this).parent().children().not(this).animate({
        width: "30%"
    },  0);
    $(this).animate({
        width: "70%"
    }, 0);
    $(this).parent().children().not(this).find('.overview').hide();
    $(this).find('.overview').show();
});

$targets.mouseleave(function() {
    $('.overview').hide();
    $targets.animate({
        width: "50%"
    }, 0);
});

.wrapper {
    width: 600px; 
}
.overview {
    display: none;
}
.vail {
    transition: all 0.9s ease;
    background-color: blue;
    color: #fff;
    float: left;
    height: 300px;
    width: 50%;
}
.denver {
    transition: all 0.9s ease;
    background-color: pink;
    float: left;
    height: 300px;
    width: 50%;
}

Upvotes: 1

Views: 749

Answers (1)

Pixeldenker
Pixeldenker

Reputation: 142

I think the problem is that when you leave the denver div class, the vail div class goes slightly faster back to 50% width than the denver div class.

This makes the two div's together more than 100% and they won't fit next to each other. I tried this and I had no problem with breaking div's on mouse leave. Hopefully this is what you were looking for.

var $targets = $('.vail, .denver');
    $targets.hover(function() {
        $(this).parent().children().not(this).animate({
            width: "30%"
        },  0);
        $(this).animate({
            width: "70%"
        }, 0);
        $(this).parent().children().not(this).find('.overview').hide();
        $(this).find('.overview').show();
    });

    $targets.mouseleave(function() {
        $('.overview').hide();
         $(this).animate({
               width: "50%"
           }, 0);

        $(this).parent().children().not(this).animate({
                width: "50%"
            }, 0);
    });

Upvotes: 1

Related Questions