为什么这个jquery动画不起作用？

我一直试图让侧边栏左右滑动，具体取决于点击。为什么这个jquery动画不起作用？

我确实尝试切换无法使其工作。

现在我已经试过这个代码，它的作品第一次点击的时候，但一旦点击出于某种原因再次点击时无法正常工作：

$('.pushbutton').on('click',function(){ 

     $('.left_sidebar, .footer').animate({left: "-320px"}, 800); 
     $('.main_body_right').animate({marginLeft: "25px"}, 800); 
     $('.pushbutton').animate({fontSize: "24px",fontWeight: "400",paddingTop: "3px"}, 500); 
     $('.pushbutton').html('+'); 
     $('.pushbutton').attr('class','pushbuttonplus'); 

    }); 

    $('.pushbuttonplus').on('click',function(){ 

     $('.left_sidebar, .footer').animate({left: "0px"}, 800); 
     $('.main_body_right').animate({marginLeft: "325px"}, 800); 
     $('.pushbuttonplus').animate({fontSize: "26px",fontWeight: "700",paddingTop: "0px"}, 500); 
     $('.pushbuttonplus').html('-'); 
     $('.pushbuttonplus').attr('class','pushbutton'); 

    });

来源

2013-10-20 Robert

把例子：http://jsflidde.net/ – ZiTAL

每次 “.pushbutton” 被点击时，你缝附上新的点击事件处理程序在所有“.pushbuttonplus”。可能导致动画和性能问题碰撞的元素 – Stphane

@ f00bar .pushbutton仅用于一次，然后类attr更改为pushbuttonplus，因此在更改为另一个之前，一次只能点击一次 – Robert

香港专业教育学院改变了这一逻辑，这样做，而不是：

// Make the push sidebar push button functional 
    $('.pushbutton a').on('click',function(event){ 

     event.preventDefault(); 

     var currentId = $(this).attr('id'); 

     if(currentId == 'open_sidebar'){ 

      $('.left_sidebar, .footer').animate({left: "-320px"}, 800); 
      $('.main_body_right').animate({marginLeft: "25px"}, 800); 
      $('#open_sidebar').html('<a href="#">+</a>'); 
      $('#open_sidebar').attr('id','close_sidebar'); 

     } 

     if(currentId == 'close_sidebar'){ 

      $('.left_sidebar').animate({left: "0px"}, 800); 
      $('.footer').animate({left: "40px"}, 800); 
      $('.main_body_right').animate({marginLeft: "325px"}, 800); 
      $('#close_sidebar').html('<a href="#">-</a>'); 
      $('#close_sidebar').attr('id','open_sidebar'); 

     } 

    });

这接缝做:)

来源

2013-10-20 10:53:25 Robert

因为你是动态改变/添加/删除类的元素，选择不会被绑定到任何的伎俩元素。

改为使用event delegation，所以你会将事件附加在主体上，但只有当特定的选择器匹配时。

价：

当提供一个选择器，该事件处理程序被称为委派。当事件直接发生在绑定元素的上时，不会调用处理函数，但仅对于与选择器匹配的后代（内部元素）。 jQuery将事件从事件目标中的事件冒泡到处理程序所附的元素（即，最内层到最外层元素），并为匹配选择器的路径上的任何元素运行处理程序。

代码：

$('body').on('click','.pushbutton', function() { 

    alert("demo1") 

    $('.left_sidebar, .footer').animate({ 
     left: "-320px" 
    }, 800); 
    $('.main_body_right').animate({ 
     marginLeft: "25px" 
    }, 800); 
    $('.pushbutton').animate({ 
     fontSize: "24px", 
     fontWeight: "400", 
     paddingTop: "3px" 
    }, 500); 
    $('.pushbutton').html('+'); 
    $('.pushbutton').attr('class', 'pushbuttonplus'); 

}); 

$('body').on('click','.pushbuttonplus', function() { 

     alert("demo2") 

    $('.left_sidebar, .footer').animate({ 
     left: "0px" 
    }, 800); 
    $('.main_body_right').animate({ 
     marginLeft: "325px" 
    }, 800); 
    $('.pushbuttonplus').animate({ 
     fontSize: "26px", 
     fontWeight: "700", 
     paddingTop: "0px" 
    }, 500); 
    $('.pushbuttonplus').html('-'); 
    $('.pushbuttonplus').attr('class', 'pushbutton'); 

});

演示：http://jsfiddle.net/IrvinDominin/wBBZm/

来源

2013-10-20 10:56:21

为什么这个jquery动画不起作用？

回答

相关问题