jQuery.animate

我有以下问题：一个列表项单击后，一个div向上滑动并将不透明度更改为1。我的目标是，在第二次单击时，相同的div将获得不透明度0

我尝试删除原始类并添加一个新类“selected”，然后在该类上应用单击事件。出于某种原因，第二部分不起作用。有什么想法吗

$(document).ready(function () {
    $('li.slide1').click(function () {
        $("div#slidebox1").animate({
            opacity: .8,
            top: -200,

        }, 300);

        $("li.slide1").removeClass("slide1").addClass("selected");

    });

    $("li.selected").click(function () {

        $("div#slidebox1").animate({
            opacity: 0,

        }, 300);

    });
});

使用

on（）

委托您处理第二次单击

当前代码正在设置两个

单击
document.ready（）
上的
处理程序-但是由于
li
没有选择类
，
，因此它们没有应用处理程序。使用
on（）
将处理程序设置为
ul
，它捕获冒泡单击事件，并检查其目标是否为
li。选中
并调用函数

$('li.slide1').click(function () {
    $("div#slidebox1").animate({
        opacity: .8,
        top: -200
    }, 300, function(){
         $(this).one("click", function(){
            $("div#slidebox1").animate({opacity:0}, 300);
         });
    });

    $("li.slide1").removeClass("slide1").addClass("selected");
});

此外，正如gdoron在下面所建议的，您可以将
回调中的处理程序绑定到第一个函数

$('li.slide1').click(function () {
    $("div#slidebox1").animate({
        opacity: .8,
        top: -200
    }, 300, function(){
         $(this).one("click", function(){
            $("div#slidebox1").animate({opacity:0}, 300);
         });
    });

    $("li.slide1").removeClass("slide1").addClass("selected");
});

您必须将.on（）用于jQuery 1.7+或.live（）jQuery 1.3+，因为当用户单击li.slide1时，您添加了“selected”类，而该类以前不存在

$(document).ready(function () {
    $('li.slide1').live('click',function () {
        $("div#slidebox1").animate({ opacity: .8, top: -200 }, 300);
        $(this).removeClass("slide1").addClass("selected");
    });

    $("li.selected").live('click', function () {
        $("div#slidebox1").animate({ opacity: 0 }, 300);
    });
});

欢迎光临。请仔细阅读。如果你想得到别人的帮助，你最好花更多的时间在阅读上。为什么？这里的人认为，
上的
是每个问题的答案，但事实并非如此。我不明白为什么在这种情况下这不起作用。如果你有更好的答案@gdoron，请分享。否则，你的评论很难有建设性吗？另外，答案应该是
callback
到animate函数。编辑：刚刚完成。这很好，但它似乎“接管”了我的第一次单击事件。因此，当我第一次单击该项目时，它会向上滑动，然后消失。添加
return false到第一个单击处理程序（在末尾）。这将阻止事件冒泡到
ul
。除了使用非常旧的jQuery版本，您永远不应该使用
.live（）。如果您需要委派事件（这就是这个过程的名称），那么如果您在jQuery 1.7之前并且没有访问
.on（）
的权限，那么您应该使用
.delegate（）
函数。