JQuery bounce effect broken by Bootstrap

Question

I'm trying to bounce a popup on hover. I want the popup to be a Bootstrap (v3.0.0) panel. The problem is, the panel changes it's width after the bounce effect.

Example: http://fiddle.jshell.net/YxRvp/

Anyone knows how to fix this?

Answer 1

add min-width:315px; to .poppy

http://fiddle.jshell.net/YxRvp/10/

#poppy {
    position: absolute;
    top: 200px;
    left: 250px;
    width: 315px;
    height: 200px;
    overflow: hidden;
    background: #f9f9f9;
    display: none;
    z-index: 2;
    min-width:315px;

}

Answer 2

DEMO

$('.hover').mouseenter(function (e) {
    $('#poppy').css('top', e.pageY).css('left', e.pageX);
    $('#poppy').effect("bounce", {
        times: 1
    }, 200);
    $('.overlay').show();
});

$('.hover').mouseleave(function () {
    $('#poppy').hide();
    $('.overlay').hide();
});