jQuery重复动画和打破形式的功能

Question

我已经得到了以下的代码，它适用于忘记传递链接几次点击，然后当它通过一个完整的点击周期，它只是打破再次加载所有的动画和不停止。我粘贴了下面的相关代码和小提琴链接。

jQuery的

$(document).ready(function() { 
    $('.forgot').on('click', function (e) { 
     e.preventDefault(); 
     $('#login-form').fadeOut(400); 
     $('#forgot-pass-form').delay(200).fadeIn(400); 
     $(this).text('Suddenly remembered your details? Click here'); 
     $(this).on('click', function() { 
      $('#forgot-pass-form').fadeOut(400); 
      $('#login-form').delay(200).fadeIn(400); 
      $(this).text('Forgotten your login details?'); 
     }); 
     e.stopPropagation(); 
    }); 
}); 

fiddle

Answer 1

这是因为，要附加其他click处理每被点击一次点击的元素，因此被点击的元素时，它的几个点击处理器在执行一次。一种选择是使用fadeToggle方法。

$(document).ready(function() { 
    $('.forgot').on('click', function (e) { 
     e.preventDefault(); 
     $('#login-form').fadeToggle(400); 
     $('#forgot-pass-form').fadeToggle(400); 
     $(this).text(function(_, textContent) { 
      return textContent === 'Forgotten your login details?' 
        ? 'Suddenly remembered your details? Click here' 
        : 'Forgotten your login details?' 
     }); 
    }); 
}); 

改进的淡入淡出效果：

$(document).ready(function() { 
    $('.forgot').on('click', function (e) { 
     e.preventDefault(); 
     $('form:visible').fadeOut(400, function(){ 
      $(this).siblings('form').fadeIn(); 
     }); 
     $(this).text(function (_, textContent) { 
      return textContent === 'Forgotten your login details?' ? 'Suddenly remembered your details? Click here' : 'Forgotten your login details?' 
     }); 
    }); 
}); 

http://jsfiddle.net/WTtNS/