jquery抖动效应与bootstrap问题

我使用.effect（"shake"）有一个奇怪的jquery效果。我的跨度是应用于移动到包含它的元素前面的效果，当效果结束时，它会返回到它的原始位置

<div id="menu_area">
<ul id="menu">
<?php

?>
<li><a href="<?=base_url()?>home">Home</a></li>
<li><a href="#">All Products</a></li>
<li><a href="#" id="msgcart">Shopping Cart<span id='badgemessage' class='badge'><?=count($ses)?></span></a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
        <div id="search_form">
        <?=form_open_multipart(base_url().'products/search')?>
        <input type="text" name="pretrazi" id="search_input" placeholder="Search Products">
        <button type="submit" name="search" id="trazi"><img src="<?=base_url()?>images/search.png" width="20" height="17" id="searchslika"/></button>
        </form>
        </div>
</div>

css：

#menu_area{
width:1000px;
height:50px;
}
#menu{
margin:0;
padding:0;
line-height:35px;
list-style:none;
float:left;
position:relative;
}
#menu li{
display:block;
float:left;
}
#menu a{
text-decoration:none;
padding:8px;
margin:5px;
color:#444;
font-weight:bold;
}

引导程序徽章类：

.badge{
display:inline-block;
min-width:10px;
padding:3px 7px;
font-size:12px;
font-weight:700;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
background-color:#777;
border-radius:10px}

js:

$("#badgemessage").effect("shake",{distance:1,times:1});