jquery animation de position absolue

Question

Je vais avoir du mal avec un morceau de code

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

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

et ici vous pouvez voir le code complet http://pastebin.me/a5b13717c5d7125cd904572c041ce3e1 ne fonctionne pas :(

Answer 1

Sans utiliser en direct ou délégué:

Ajouter une classe à la touche comme: curseur bouton

$(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

La raison pour laquelle le second clic n'est pas est géré au moment où vous liez votre gestionnaire, il n'y a pas d'éléments input.click, donc le gestionnaire n'est pas lié

Pour vous assurer que le gestionnaire est lié après avoir modifié la classe d'entrée, vous devez utiliser 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'); 
    }); 
});