Question

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

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

有什么想法，请帮忙？您可以查看实际的演示here

Answer 1

只需给出为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);
      });

Answer 2

也许initial不能正常工作，您能否占据初始位置并更改anim2的left属性？

var initialPos = $("#anim2").css("left");    
$('#anim2').animate({ 'right' : '0px','left' : initialPos + "px" },500);

jQuery的动画运行点击再次无法运行

2 个答案: