JQueryUI Bounce Effect: div disappears while animation occurs

Question

I have implemented the JQuery bounce effect to some images within a list. The list is set to be horizontal with the following css:

 #sociallinks li{
    list-style:none;
    display: inline;
}

The bounce effect works with mouseover(). However, when I mouse over the images within the list the list snaps back to normal vertical (ie the <li>'s loose their positioning). Once the bounce animation is over the image resumes its normal position.

Does anyone know how to retain the positioning of the elements whilst the animation is occruing?

Thanks!

My full code:

 #sociallinks li{
    list-style:none;
    display: inline;
    padding: 5px;
    width: 40px;
}

<script>
$(function(){
    $('.socialicon').mouseover(function () {
          $(this).effect("bounce", { times:5 }, 300);
    });

});
</script>

<ul>
<li class="socialicon"><img src="assets/images/facebookicon.png"></li>
<li class="socialicon"><img src="assets/images/twittericon.png"></li>
<li class="socialicon"><img src="assets/images/pinteresticon.png"></li>
</ul>

Answer 1

Seems to be an issue with using <li>s and bounce. Changed them to divs with float left and seems to be ok