0

我有这个toggle()方法animate()，因此单击它会切换动画和所有内联样式，并且在交替单击时它将删除它们并返回到正常状态。但是，当我添加切换代码时，它不再起作用（即，它在没有切换的情况下工作，但在第一次单击后不会再次返回）。

$("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

此解决方案将为您工作。只需将整个代码复制并粘贴到一个 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 回答