Question

我使用.effect（＆＃34; shake＆＃34;）有一个奇怪的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 class：

.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

jquery摇动效果与bootstrap问题

1 个答案: