web-dev-qa-db-ja.com

animate（）を使用してdivを右から左にスライドします

Divが必要です'.whole'アニメーション化（右から左にスライド）

jQuery

$('#menu').click(function() {
      $('.whole').toggleClass('r2');
      $('#slideMenu').toggle();
});

.r2 { right: 200px }

関数animate（）を適切に使用できません。

jqueryjquery-animate
10
Nagaraj Chandran

これは動作するはずです：

$('#menu').click(function(event) {
      event.preventDefault(); // because it is an anchor element
      $('.whole').animate({
          right: '200px'
      });
      $('#slideMenu').toggle();
});

ただし、positionプロパティはCSSで既に設定されている必要があります。そうでないと、必要なものが正確に得られない場合があります。

ワーキングJSFiddle

説明すると、関数は次のようにプロパティのJSオブジェクトを受け取ります。

{
    right: '200px',
    somethingElse: 'value',
    myboolean: true
}

これを変数に割り当てて、animateに渡すこともできます。

var cssProperties = { right: '200px' }

$('#menu').click(function() {
  $('.whole').animate(cssProperties);
});

documentation で読み取り可能な他の引数を渡すことができます。

13
MarioDS