时间戳

首页 > 解决方案 > jquery animate run on click again not running

javascript - jquery animate run on click again not running

问题描述

我在下面有这个代码，它只是通过增加和减少左右值来使元素左右移动

$('#signup').click(function(){
      setTimeout(function(){
        $('#anim1 .bg-box .overlay-box #signin-text,#anim2 #signin-form').hide();
        $('#signup-text,#anim2 #signup-form').fadeIn();
      },300)
      $('#anim1').animate({ 'right' : '0px' },500);
      $('#anim2').animate({ 'right' : 'initial','left' : '0px' },500);
  });

  $('#signin').click(function(){
      $('#anim1').animate({ 'left' : '0px','right' : 'initial' },500);
      $('#anim2').animate({ 'right' : '0px','left' : 'initial' },500);
  });

起初，它会动画，但是当我触发以下事件时

$('#signin').click(function(){

      $('#anim1').animate({ 'left' : '0px','right' : 'initial' },500);
      $('#anim2').animate({ 'right' : '0px','left' : 'initial' },500);
  });

这条线动画

 $('#anim1').animate({ 'left' : '0px','right' : 'initial' },500);

但这条线不是

$('#anim2').animate({ 'right' : '0px','left' : 'initial' },500);

任何想法，请帮忙？你可以在这里查看实际的演示

标签： javascriptjquery

解决方案

只需给出您为 left, right 元素提供的宽度百分比。以下是您可以替换的工作片段。 

  $('#signup').click(function(){
          setTimeout(function(){
            $('#anim1 .bg-box .overlay-box #signin-text,#anim2 #signin-form').hide();
            $('#signup-text,#anim2 #signup-form').fadeIn();
          },300)
          $('#anim1').animate({ 'right' : '0px','left':'56%' },500);
          $('#anim2').animate({ 'right' : '44%','left' : '0px' },500);
      });

      $('#signin').click(function(){
          setTimeout(function(){
            $('#anim1 .bg-box .overlay-box #signup-text,#anim2 #signup-form').hide();
            $('#signin-text,#anim2 #signin-form').fadeIn();
          },300);
          $('#anim1').animate({ 'left' : '0px','right' : '56%' },500);
          $('#anim2').animate({ 'right' : '0px','left' : '44%' },500);
      });

推荐阅读