1

からまでのli:nth-child(2)幅のみをアニメーション化しようとしています。230px780px

私はこれを行いましたが、liこのセクション内に があるときはいつでも、nth-child(3)その幅780pxも与えます。

しようとしている 1 つの要素の幅だけに影響を与えるにはどうすればよいですか?

JS:

$(document).ready(function(){
    $("#getsocial").live('click', function(){
        $(".homepage li:nth-child(1)").fadeOut(1000);
        $(".homepage li:nth-child(3)").fadeOut(1000);
        $(".homepage ul > li:nth-child(2)").fadeOut(1000).delay(300).fadeIn(1000).animate({width:'780px'},1000);
        $(".socialshare").hide().delay(2400).fadeIn(1000);
        $(".goback").hide().delay(2400).fadeIn(1000);
    });
});

私もこれを試しました：

$(document).ready(function(){
    $("#getsocial").live('click', function(){
        $(".homepage li:nth-child(1)").fadeOut(1000);
        $(".homepage li:nth-child(3)").fadeOut(1000);
        $(".homepage li:nth-child(2)").fadeOut(1000).delay(300).fadeIn(1000).animate({width:'780px'},1000);
        $(".socialshare").hide().delay(2400).fadeIn(1000);
        $(".goback").hide().delay(2400).fadeIn(1000);
    });
});

HTML :

<div class="homepage">
  <ul>
    <li>content here</li>
    <li>
      <ul>
        <li>content here</li>
        <li>content here</li>
        <li>content here</li>
      </ul>
    </li>
    <li>content here</li>
  </ul>
</div>

与えられた助けを前もってありがとう:)

4

1 に答える 1

4

代わりにこのセレクターを使用してください。

.homepage > ul > li:nth-child(2)

これは、上に投稿した html で機能します。これulは、の直接の子孫であるa でのみ機能する<div class="homepage">ため、 sub では機能しないためですul。

于 2012-04-23T10:36:32.833 に答える