2015-03-03 2 views
2

У меня есть странный эффект jquery с использованием .effect ("shake"). Мой диапазон, который является эффектом, применяемым к движениям перед элементом, который содержит его, и когда эффект закончен, возвращается чтобы это исходное положениеjquery shake effect with bootstrap issue

<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} 

ЯШ:

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

Вы можете добавить jsfiddle или jsbin воспроизводя свою ошибку? – NateW

+0

@NateW http://jsbin.com/civeluxuzi/1/edit?html,css,js,output – admir

ответ

2

JQuery добавляет Div обертку к элементу манипулируют делает shake эффект, а затем удаляет оберточную DIV. Ваш элемент был встроен, и поэтому, когда была применена обертка div, она автоматически имела значение display: block;.

Добавление следующей строки CSS исправляет это значение по умолчанию, чтобы оно отображалось как встроенное.

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

Рабочая jsBin: http://jsbin.com/rijeluweje/2/edit

+0

Я проверю его, когда я вернусь домой и дам вам кредиты, если он сработает для меня – admir

+0

спасибо. Это сработало – admir

+0

Сэр, ты джентльмен! – Nickon