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

不使用 live 或 delegate：

向按钮添加一个类，例如： slider-button

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