4

ここに jsfiddle リンクがあります: http://jsfiddle.net/qrzwD/

アニメーションが完了した後、2 番目の李が上に移動するのは好きではありません。

誰かがこれを止めるのを手伝ってくれませんか。

ここに私のhtmlがあります:

 <nav>
    <ul>
        <li> <a class="content-box-blue" href="#"> </a> </li>
        <li> <a class="content-box-gray" href="#"> </a> </li>
    </ul>
</nav>

ここに私のCSSがあります:

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
margin: 0;
padding: 0;
}
ul, li, nav {
margin: 0;
padding: 0;
}
nav {
float: right;
width: 400px;
margin-top: 35px;
margin-right: 10px;
}
nav ul {
list-style-type: none;
float: right;
}
nav li {
float: right;
clear: right;
margin-bottom: 20px;
}
.content-box-blue {
background-color: #00bfff;
border: 1px solid #afcde3;
height: 50px;
width: 0px;
border-top-left-radius: 8% 50%;
border-bottom-left-radius: 8% 50%;
text-align:center;
line-height:50px;
 }
 .content-box-gray {
background-color: #FF69B4;
border: 1px solid #bdbdbd;
height: 50px;
width: 0px;
border-top-left-radius: 12% 50%;
border-bottom-left-radius: 12% 50%;
text-align:center;
line-height:50px;
 }

ここに私のjqueryコードがあります:

$(function(){
    $(".content-box-blue").animate({width:'350px'},1200,function(){$('<span>Charcoal Paintings</span>').fadeIn(1000).appendTo($(this));});

    $(".content-box-gray").animate({width:'250px'},1200,function(){$('<span>Sketches</span>').fadeIn(2000).appendTo($(this));});

});
4

4 に答える 4

5

A の代わりに LI に高さを設定します。

li {height:50px;}

http://jsfiddle.net/qrzwD/3/

新しく追加された A により、LI が全体の高さを変更します。

于 2013-05-15T11:16:03.423 に答える
3

display:block.content-box-blue と .content-box-gray の両方を設定することで解決できます

ここでフィドル

于 2013-05-15T11:16:41.253 に答える
1

a-selector に加えて、一般的な -selector にheight: 50pxli-elementsの static を追加することで、これを解決できます。nav li

ただし、なぜこのように動作するのかを説明することはできません。

于 2013-05-15T11:16:06.643 に答える
1

してみてください

nav li a{
    display:block;
}

リンクはこちら http://jsfiddle.net/qrzwD/4/

于 2013-05-15T11:22:19.113 に答える