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