爲什麼這個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動畫不起作用？

回答

相關問題