は.animateとの.cssやjQueryの

Question

で一つだけ私はこのjQueryのコードを持っているを使用していますか？ .cssを.animateの中で使用できますか？

Answer 1

まず、addinga/jQueryの中で直接CSSプロパティを修正することは悪い習慣と考えられています。あなたがする必要があるすべてはあなたのCSSで要素上の位置を設定されている：あなたはその後、大幅に削減するためにあなたのjQueryのコードをリファクタリングし、また必要に応じて、あなたの要素をアニメーション化することができます

CSS

#help { 
    position: absolute; 
} 

：

を

var help; 

$('.helpPin').click(function(){ 
    var bottom = help ? '0' : '-206px'; 
    $("#help").animate({ 'bottom' : bottom }); 
    help = !help; 
}); 

あなたはその間に、CSSを使って位置を設定する必要があり

Answer 2

より効率的な方法でコードを作成してください。

var help; 
    $('.helpPin').click(function(){ 

     if(help == true){    
      $('#help').css({ 
       'position' : 'absolute', 
       'bottom' : '0' 
      }).animate(); 
      help = false; 
     } else { 
      $('#help').css({ 
       'position' : 'absolute', 
       'bottom' : '-206px' 
      }).animate(); 
      help = true; 
     } 
    }); 

希望、あなたは同じものを探しています。

Answer 3

すべてのworking demo

#help 
{ 
    position: absolute; 
} 

$('.helpPin').click(function(){ 
     if(help == true){ 
      $('#help').animate({"bottom": '0'}); 
      help = false; 
     } else { 
      $('#help').animate({"bottom": '-206px'}); 
      help = true; 
     } 
    }); 

Answer 4

......

var help; 
$('.helpPin').click(function() { 

    var bottom = (help) ? '0' : '-206px'; 

    $('#help') 
      .css({ 'position': 'absolute' }); 
      .animate({ 'bottom': bottom }); 

    help = !help; 
});