0

toggle()メソッド用にこれを持っているanimate()ので、1 回のクリックでアニメーションとすべてのインライン スタイルが切り替わり、別のクリックでそれらが削除されて通常の状態に戻ります。ただし、トグル コードを追加すると、機能しなくなります (つまり、トグルなしで機能しますが、最初のクリック後に元に戻りません)。

$("a").click(function () {
    $("ul li").each(function (index) {
        $("a").toggle(function () {
            $("ul li").animate({
                'top': ((index + 1) * 31) + 6 + "px",
                'opacity': '1'
            }, 0);
        }, function () {
            $("ul li").animate({
                'top': '0',
                'opacity': '0'
            }, 0);
        });
    });
});

トグルを間違って使用している可能性があると思います（クリックされた要素でトグルを使用する必要があることを読みましたが、それが正しいかどうかはわかりません）また、each()機能についてもわかりません. 助けてくれてありがとう:)

4

1 に答える 1

0

このソリューションはあなたのために働くでしょう。このコード全体をコピーして 1 つの html ファイルに貼り付けてから、チェックアウトしてください。

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul li {
    position: absolute;
    opacity: 0;
}
</style>
</head>

<body>
<ul>
    <li>Lorem Ipsum 1</li>
    <li>Lorem Ipsum 2</li>
    <li>Lorem Ipsum 3</li>
</ul>
<a href="#" t="0">Click me</a>

<script type="text/javascript">
$("a").click(function () {
if($(this).attr("t")=="0"){
$(this).attr("t","1");
    $("ul li").each(function (index) {
        $(this).animate({
            'top': ((index + 1) * 31) + 6 + "px",
            'opacity': '1'
        }, "slow");
    });
    }else
    {
        $(this).attr("t","0");
        $("ul li").each(function (index) {
        $(this).animate({
            'top': "0px",
            'opacity': '0'
        }, "slow");
    });
    }
});


</script>


</body>
</html>
于 2013-04-24T18:15:39.103 に答える