jQuery的.animate

Question

我有以下問題：一旦點擊列表項，一個div向上滑動，改變不透明度爲1。我的目標是，在第二次點擊，同一div會得到不透明度爲0

我嘗試刪除原來的類，並添加一個新的，「選擇」，然後應用一個點擊事件。出於某種原因，第二部分不起作用。有任何想法嗎？

$(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+或.live（）jQuery的1.3+因爲你加上li.slide1「選擇」類時，用戶點擊它簡化版，之前存在。

$(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()委託你的第二次點擊的處理。

您當前的代碼設置了兩個click處理器在document.ready() - 但自從li的不具有類selected但他們沒有應用到他們的處理程序。使用on()將處理程序設置爲ul，該處理程序捕獲冒泡單擊事件，並檢查它是否爲目標，並調用您的函數。

此外，正如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"); 
});