異なるセレクタを同時にアニメーション化する方法Jquery

Question

私は非常にjqueryに生まれていません。私は同時に複数のセレクターをアニメーション化するのに問題があります。これまでに学んだことから、function（）{}が入っている$（document）.ready（）が必要です。だから私は持っている：

$(document) .ready(function(){ 
     $('.bio').animate(
      { 
      left:'50px' 
      }, 2500); 
    }); 

それはうまく動作します。しかし、別のアニメーションの第2のセレクタを追加すると、

$(document) .ready(function(){ 
     $('.bio').animate(
      { 
      left:'50px' 
      }, 2500); 
**$('.web').animate(
     { 
     right:'50px' 
     }, 2000);** 
    }); 

何も起こりません。なぜこれがあり、どのようにアニメーションを実行できますか？

Answer 1

.bioと.webの要素には、positionのスタイリングがありません。要素の位置をアニメーション化するには、有効な初期設定が必要です。

例：

.bio, .web { 
    position: relative; 
} 

ここで、相対位置の要素で期待通りに動作します私は有線きた例があります： https://codepen.io/anon/pen/bWwbqr