Эффект отказов jquery не работает с плавающими элементами - PullRequest
Новая
       9

Эффект отказов jquery не работает с плавающими элементами

0 голосов
/ 03 ноября 2011

Я использую ссылки, которые расположены слева.Затем, когда я даю эффект отскока элементам при нажатии, когда я щелкаю их, происходит отскок, но он сдвигается вправо от контейнера.

Эффект не возникает при удалении поплавка: левый эффект.Я пытался найти замену для свойства float, но не смог найти должного эффекта.Это мой код 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>

Ответы [ 2 ]

0 голосов
/ 20 октября 2012

Для других, ищущих похожие проблемы:

У меня было что-то вроде этого: 

<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>
0 голосов
/ 03 ноября 2011

Что происходит, когда вы перемещаете элементы списка, а не ссылки, и выполняете отскок по ссылке? 

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