jQuery - bouncing effect without changing object's position on screen

Question

Not sure if my html and/or css would be needed to find the issue but I've been calling the bounce effect on images when clicked and it completely changes their position on the screen before/during the bounce. Not sure why this is? I have:

$('img').click(function() {
        $(this).effect('bounce', {times:3}, 300);
});

With images to the right of other divs (including inputs) and the jump to the bottom middle of the screen for their bouncing

edit: here is the jsFiddle: http://jsfiddle.net/ep6wG/1/ (images should bounce)

Answer 1

Check this DEMO http://jsfiddle.net/yeyene/nmy3V/

You can set css like this.

#content {
    float:left;
    width:100%;
    margin:100px 0 0 0;
    background:red;
}
#content img {
    position:absolute;
    width:100px;
    height:120px;
}
#content input {
    float:left;
    margin:50px 0 0 120px;
}
#content div {
    float:left;
    margin:100px 0 0 10px;
}