Question

我使用jquery .animate（）来更改<li>标记的宽度。我在<li>内嵌<p>标签中的文字，以便我可以将其居中，但是，当动画发生时，文字向下移动了<li>元素的50％，我这样做不知道50％是否有所回应或只是巧合。

我的HTML：

<div id="about_nav">
            <ul>
                <li id="button_welcome"<p>Welcome</p></li>
                <li id="button_services"><p>Services</p></li>
                <li id="button_naming"><p>Naming</p></li>
                <li id="button_creating"><p>Creating Brands</p></li>
                <li id="button_bizam"><p>Bizam What?</p></li>
            </ul>
        </div>

我的jquery代码是：

$('#button_welcome').click(function(){
        if($(this)!=previous){ //checks if it was clicked last
            if(previous!=null){ //checks if the previous element exists
                previous.animate({width: 130},150); //resets previous
            }
            $(this).animate({width: 163},150); //animates current
            previous = $(this); //assigns current to previous
            $('#about_content').children().hide(); //resets tabs window
            $('#tab_welcome').show(); //displays correct tab
        }
    });

我的css：

#about_nav{
    float:left;
    display:block;
    margin-left:0px;
    overflow:hidden;
    padding-right:10px;
}
#about_nav ul{
    list-style:none;
    padding:0;
}
#about_nav li{
    height:48px;
    width:130px;
    background: #613675; /* old browsers */

    background: -moz-linear-gradient(top, #613675 0%, #9145B5 50%, #613675 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#613675), color-stop(50%,#9145B5), color-stop(100%,#613675)); /* webkit */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#613675', endColorstr='#613675',GradientType=0 ); /* ie */

    background: -o-linear-gradient(top, #613675 0%,#9145B5 50%,#613675 100%); /* opera */

    text-align:middle;
    margin-bottom:15px;
    -moz-border-radius-bottomright: 6px 4px;
    bottom-right-border-radius: 6px 4px;
    -webkit-border-bottom-right-radius: 6px 4px;
    -moz-border-radius-topright: 6px 4px;
    top-right-border-radius: 6px 4px;
    -webkit-border-top-right-radius: 6px 4px;
    -moz-box-shadow: 0px 3px 8px 3px #444;
    -webkit-box-shadow: 0px 3px 8px 3px #444;
    box-shadow: 0px 3px 8px 3px #444;
}
#about_nav li p{
    padding-top:19px;
    padding-bottom:19px;
    text-align:right;
    margin-right:10px;
    vertical-align:middle;
}

另外，我对$(this)!=previous的比较似乎不起作用。

那么，我怎样才能阻止我的文字移动并使其保持在<li>的中心位置，你能帮助我进行比较吗？

干杯，

弗雷泽

Answer 1

P标记以内联方式呈现，而div则呈现为块。尝试设置要显示的p标签的样式：block;它应该工作。

Answer 2

首先：关闭此li标签，正如其他人所说的那样。

<li id="button_welcome"><p>Welcome</p></li>

第二：将你的pss改为此。

#about_nav li p{
padding: 0;
margin: 0 10px 0 0;
height: 100%;
padding-top: 15px; /* change this to adjust height of the p tag */
text-align: right;
}

另外，根据给出的代码，您没有定义'previous'。我需要看看你的其余代码，看看为什么它不起作用。

JsFiddle：http://jsfiddle.net/nXgSa/

Answer 3

一行易修：

$('#myDiv > p').css('display','block');

另外，我在你的例子中注意到：

<li id="button_welcome"<p>Welcome</p></li>

你可能也忘了关闭你的＆lt; li>标签

Answer 4

终极修复：

在动画期间查看开发工具中的元素，结果是jQuery在整个转换期间将样式overflow: hidden;应用于元素。

要解决此问题，只需将overflow: visible属性添加到.animate()功能：

if(previous!=null) { //checks if the previous element exists
  previous.animate({
    overflow: 'visible', 
    width: 130
  }, 150);
}

$(this).animate({
  overflow: 'visible', 
  width: 163
}, 150); //animates current

以下是测试<p>标签不再下降的JSFiddle：http://jsfiddle.net/jpreynat/28fmw4vy/1/

jQuery .animate（）问题，<p>标签正在移动</p>

4 个答案: