jQuery的反彈效果不能與浮動元素

我正在使用其中有鏈接浮動到左側。然後，當我對點擊元素髮出彈跳效果時，當我點擊它們時會發生彈跳，但它會移到容器的右側。jQuery的反彈效果不能與浮動元素

當我刪除float：left效果時，不會發生這種現象。我一直在試圖找到浮動屬性的替代品，但無法找到任何適當的效果。這是我的HTML代碼

<div id="menu"> 
     <ul> 
     <li><asp:LinkButton ID="lbDashboard" ClientIDMode="Static" runat="server" onclick="lbDashboard_Click">Dashboard</asp:LinkButton></li> 
     <li><asp:LinkButton ID="lbFindHotfix" ClientIDMode="Static" runat="server" onclick="lbFindHotfix_Click">Search</asp:LinkButton></li> 
     <li><asp:LinkButton ID="lbHelpWiki" ClientIDMode="Static" runat="server" onclick="lbHelpWiki_Click">Help/Wiki</asp:LinkButton></li> 
     </ul> 
     </div>

，這是CSS部分

#menu { 
padding-top:30px; 
padding-right:30px; 
margin: 0; 
float: right; 
width:100%; 
overflow:hidden; 
} 

#menu ul, #searchdropdown ul{ 
margin: 0; 
list-style: none; 
} 

#mainlinks ul 
{ 
margin: 0; 
list-style: none; 
} 
#menu li, #mainlinks li, #searchdropdown li{ 
display: inline; 
} 

#menu a{ 
display: block; 
float: left; 
padding: 10px 10px; 
margin: 0; 
text-align: center; 
text-decoration: none; 
text-transform: uppercase; 
font-size: 14px; 
font-weight: normal; 
font-family: Georgia, "Times New Roman", Times, serif; 
color: #616B4F; 
} 


#menu a:hover{ 
background: #9FAB87; 
color: #FFFFFF; 
border-top-left-radius:1em; 
border-bottom-right-radius:1em; 
}

這是我的腳本代碼 -

<script type="text/javascript" language="javascript"> 
    $(function() { 

     //Add bounce effect on Click of the DIV 
     $('#lbDashboard').click(function() { 
      $(this).effect("bounce", { times: 3 }, 300); 
     }); 

     $('#lbFindHotfix').click(function() { 
      $(this).effect("bounce", { times: 3 }, 300); 
     }); 

     $('#lbHelpWiki').click(function() { 
      $(this).effect("bounce", { times: 3 }, 300); 
     }); 

    }); 

</script>

來源

2011-11-03 Agniva De Sarker

我沒有遇到你描述。檢查這裏：http://jsfiddle.net/bryanjamesross/s5tTx/ – rossipedia

當你漂浮在列表中的項目，而不是會發生什麼鏈接，並在鏈接上執行反彈？

#menu li, #mainlinks li, #searchdropdown li{ 
display: inline; 
} 

#menu li { 
float: left; 
padding: 10px 10px; 
} 

#menu a{ 
margin: 0; 
text-align: center; 
text-decoration: none; 
text-transform: uppercase; 
font-size: 14px; 
font-weight: normal; 
font-family: Georgia, "Times New Roman", Times, serif; 
color: #616B4F; 
}

來源

2011-11-03 06:49:29

感謝buddy！那解決了它。 –

對於其他人尋找類似的問題：

我有這樣的事情：

<div> 
    <a href="#"> 
    link 
    </a> 
    <div style="float:right;"> 
    Controls 
    </div> 
</div>

而且我想一定事件後反彈了幾次的鏈接。但是當它發生時，它就混亂了其他內部div的顯示。

我切換浮動到另一邊，而現在它的工作原理：

<div> 
    <a href="#" style="float:left;"> 
    link 
    </a> 
    <div> 
    Controls 
    </div> 
</div>

來源

2012-10-19 22:39:05 Ryan

jQuery的反彈效果不能與浮動元素

回答

相關問題