Question

我正面临一个非常讨厌的问题^^。当使用jquery扩展边框时，我的左侧菜单文本正在移动。我正在努力阻止移动文本。但没有任何作用：/ 任何的想法？

左侧菜单的CSS？

.main .left {
    width: 220px; 
    margin-right: 20px; 
    float: left;
}
.main .box {
    margin-top: 10px;
}
.main .box .bname {
    font-size: 15px; 
    background: url(../images/sepa.png) no-repeat left center; 
    padding: 5px 0 5px 15px;
}
.main .box ul {
    margin: 10px 0 0 0; 
    padding: 0; 
    list-style: none;
}
.main .box ul li {
    padding-left: 10px; 
    margin-bottom: 1px; 
}
.main .box ul li a {
    display: block; 
    padding: 3px;
}

.main .box ul li a:hover{}

我的动画边框jquery：

jQuery(document).ready(function($) {
    $(".box ul li").hover(function() {
        $(this).animate({borderWidth: 20}, "fast");
    }, function() {
        $(this).animate({borderWidth: 2}, "fast");
        });
});

问题是当边框动画（borderWidth：20）时，它会将文本向右移动。我希望文本固定在同一个地方我的HTML：

<div class="box">
   <div class="nadpis">Dokumenty</div>
   <ul>
       {foreach $MENU['USER1'] as $row}
           <li>
               <a href="{!$row->odkaz}" {widget  rsLista 'MENU',$row->idecko,$MENU_WEB['USER1'],$MENU_SLOZKA['USER1'],$row->nazev}>{$row->nazev}</a>
           </li>  
       {/foreach}
   </ul> 
</div>

Answer 1

您可以通过操纵元素填充并使其成为动画的一部分来修复文本：

CSS

.main .box ul li{padding:18px; margin-bottom: 1px;}

JS

$(".box ul li").hover(function() {
   $(this).animate({borderWidth: 20, padding:2}, "fast");
 }, function() {
   $(this).animate({borderWidth: 2, padding:18}, "fast");
});

请参阅http://jsfiddle.net/6VjCr/

边框更改宽度时停止文本移动

1 个答案: