jquery - jquery - アニメーションの切り替え

Question

ボタンをクリックするとサイドバーが左250pxにスライドし、同じボタンをクリックするとスライドバックするサイドバーがあります250px-現在jqueryを使用して.toggleいますが、jqueryにかなり慣れていないので、何を尋ねる必要がありますか間違っている？

http://jsfiddle.net/zfc3V/13/

(function($){
  $('a.mobile-menu-icon').toggle(
    function(){
      $('#sidebar').animate({left: '250px'}, 700);
    },
    function(){
      $('#sidebar').animate({left: '0px'}, 700);
    });
});

私は 1.9.1 (.toggle が削除される前) を使用しており、UI はオプションではありません。

ありがとう。

Answer 1

1. document.ready の省略形は$(function(){ }); いいえfunction()
2. クリックで何かを起こさせたい場合は、 を追加する必要がありますclick event handler。

3. CSS transitionsの代わりにアニメーションに使用できますjQuery。

   $(function($){ $('a.mobile-menu-icon').on('click',function(){ $('#sidebar').toggleClass('active'); }); }) ;

http://jsfiddle.net/zfc3V/19/

Answer 2

ただし、イベントは「クリック」であり、トグルではありません。多分これで：

$('a.mobile-menu-icon').click( function(event){
 var trigger = $(this);
 if( trigger.hasClass("expanded")){
   trigger.removeClass("expanded");
   $('#sidebar').animate({left: '250px'}, 700);
 } else {
   trigger.addClass("expanded");
    $('#sidebar').animate({left: '0px'}, 700);
 }
});

Answer 3

イベントは廃止され、その.toggle()関数では機能しなくなりました。data-openにプロパティを追加することで、<a>そのような関数を非常に簡単に作成できます。これを行うコードは次のとおりです。必要な唯一の変更は、<a>好きなものを作ることです:<a href="#" class="mobile-menu-icon" data-open="true">Click to toggle</a>

$('a.mobile-menu-icon').click(function() {
    var x = $(this).data('open');
    $('#sidebar').animate({left: (x) ? '250px' : '0px'}, 700);
    x ? $(this).data('open', false) : $(this).data('open', true);
});

ここにフィドルのリンクがあります: http://jsfiddle.net/zfc3V/18/

Answer 4

JSの代わりに CSS を使用します。

$('a.mobile-menu-icon').on("click", function() {
  $('#sidebar').toggleClass('show');
});

CSS:

#sidebar {
  left: 0;
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}

#sidebar.show {
  left: 250px;
}