jQuery的絕對位置動畫

Question

我遇到了一段代碼

$(function(){ 
$('input.no').click(function(){ 
$(this).animate({"left" : "80px"}, 150); 
$(this).removeClass().addClass('click'); }); 

$('input.click').click(function(){ 
$(this).animate({"right" : "0px"}, 150); 
    }); 
}); 

麻煩，在這裏你可以看到完整的代碼 http://pastebin.me/a5b13717c5d7125cd904572c041ce3e1 不工作:(

Answer 1

不使用現場或委託：

添加類像按鈕：滑塊鍵

$(function() { 
    $('.slider-button').bind('click', function() { 
    if ($(this).hasClass('no')) { 
     $(this).animate({"left" : "80px"}, 150); 
     $(this).removeClass('no').addClass('click'); 
    } else { 
     $(this).animate({"left" : "0px"}, 150); 
     $(this).removeClass('click').addClass('no'); 
    }  
    });  
}); 

Answer 2

原因第二次點擊不處理的是當你綁定你的處理程序時，沒有input.click元素，所以處理程序沒有綁定。

爲了確保處理程序在更改輸入類後被綁定，需要使用live：

$(function() { 
    $('input.no').live('click', function() { 
    $(this).animate({"left" : "80px"}, 150); 
    $(this).removeClass().addClass('click'); 
    }); 

    $('input.click').live('click', function() { 
    $(this).animate({"right" : "0px"}, 150); 
    $(this).removeClass().addClass('no'); 
    }); 
});