Question

我为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()函数。谢谢你的帮助:)

Answer 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>

为什么animate（）的toggle（）不起作用？

1 个答案: