javascript - jquery 抖动效果与 Bootstrap 问题

Question

我使用 .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;
}

Bootstrap 徽章类:

.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});

Answer 1

jQuery 将一个 div 包装器添加到被操作的元素上以产生 shake 效果，然后移除包装的 div。您的元素是内联的，因此当应用 div 包装器时，它会自动具有 display: block; 默认情况。

添加以下 CSS 行修复此默认设置，使其显示为内联。

.ui-effects-wrapper {
  display:inline;
}

工作 jsBin:http://jsbin.com/rijeluweje/2/edit