jQuery .animate

Question

我有以下问题:一个列表项，一旦点击，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);

    });
});

Answer 1

您必须为jQuery 1.7+使用.on()，或者使用.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);
    });
});

Answer 2

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

使用on()委派您对第二次单击的处理。

您当前的代码是在document.ready()上设置两个click处理程序--但是因为li没有selected类，所以它们还没有应用处理程序。使用on()将处理程序设置为ul，后者捕获冒泡的单击事件，并检查它的目标是否为li.selected并调用您的函数。

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

$('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");
});