JQueryUI Bounce Effect: div disappears while animation occurs
===

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>