jquery切換自定義動畫

我有這個動畫，我想點擊一個鏈接時觸發。當我單獨運行動畫時，它工作正常。但使用jquery toggle()，它不再工作。任何人都可以輕鬆看到爲什jquery切換自定義動畫

沒有toggle()它的工作原理（運行每個單獨）：

$('#sign-in-fx').click(function() { 
    $('.login_form').animate({ width: '273' }, 'slow', 'easeInOutQuart'); 
    //$('.login_form').animate({ width: '1' }, 'slow', 'easeInOutQuart'); 
});

隨着toggle()什麼也沒有發生：

$('#sign-in-fx').click(function() { 
    $('.login_form').toggle(
     function() { 
      $(this).animate({ width: '273' }, 'slow', 'easeInOutQuart') 
     }, 
     function() { 
      $(this).animate({ width: '1' }, 'slow', 'easeInOutQuart') 
     } 
    ); 
});

這類似於jQuery toggle animation

來源

2012-10-24 greener

看到http://api.jquery.com/toggle/看起來你正在使用'toggle（）'功能不正確。 – Grzegorz

@Grzegorz它涉及到http://api.jquery.com/toggle-event/ – Reflective

@反射：杜！謝謝！ – Grzegorz

現在，我想這是你本來想做的事：

$('#sign-in-fx').toggle(
     function() { 
      $('.login_form').animate({ width: '273' }, 'slow', 'easeInOutQuart') 
     }, 
     function() { 
      $('.login_form').animate({ width: '1' }, 'slow', 'easeInOutQuart') 
     } 
);

你是動畫的元素調用toggle()，但它具有將接收click的元素被稱爲事件。

來源

2012-10-24 23:22:37 Nelson

我想發佈的薩姆答案:) – GomatoX

它仍然被棄用？ – adeneo

其實我回答同樣的問題，提供一些筆記和提供一個工作代碼。但可能有點晚:) – Reflective

我想你也可以做如下：

$('#sign-in-fx').click(function() { 
    if (! $('.login_form').is(':animated')) { //if no animation running 
     if ($('.login_form').width() > 1) { 
      $('.login_form').animate({ width: '1' }, 'slow', 'easeInOutQuart'); 
     } else { 
     $('.login_form').animate({ width: '273' }, 'slow', 'easeInOutQuart'); 
     } 

    } 
});

來源

2012-10-24 23:13:17 Nelson

toggle()使用你使用它的方式，是deprecated！

使用標誌，並直接切換動畫寬度，像這樣：

var flag = true; 

$('#sign-in-fx').on('click', function() { 
    $('.login_form').stop(true, true) 
        .animate({ width: flag?'273':'1' }, 'slow', 'easeInOutQuart'); 
    flag=!flag; 
});

FIDDLE

或者，如果你不喜歡全局，您可以隨時使用數據（）：

$('#sign-in-fx').on('click', function() { 
    var flag = $('.login_form').data('flag')!=undefined?$('.login_form').data('flag'):true; 
    $('.login_form').stop(true, true) 
        .animate({ width: flag?'273':'1' }, 'slow', 'easeInOutQuart') 
        .data('flag', !flag); 
});

FIDDLE

來源

2012-10-24 23:13:33 adeneo

你肯定是在做document.ready？你的代碼看起來很好。

$(function() { 
     $('.login_form').toggle(
      function() { 
       $(this).animate({ width: '273' }, 'slow', 'easeInOutQuart') 
      }, 
      function() { 
       $(this).animate({ width: '1' }, 'slow', 'easeInOutQuart') 
      } 
    ); 
    });

來源

2012-10-24 23:16:10 Reflective

是。我真的不能想到一個很好的理由，爲什麼它不工作，除非有一些錯字，我太累了，看不到.. – greener

看看這個答案的編輯 - 它的工作原理就是這樣！ '.toogle（）'檢查點擊並執行逐個添加的函數（處理程序）......它們可能超過2個。在代碼中，您將單擊其他鏈接。 – Reflective

jquery切換自定義動畫

回答

相關問題