Использование .animate и .css или просто один в JQuery

Question

У меня есть этот JQuery код:

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

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

Это в основном только SWAPS CSS для элемента, как я могу представить анимировать эффекты так что его не слишком рывками? Можете ли вы использовать .css внутри .animate?

Answer 1

Прежде всего, addinga/изменении свойств CSS непосредственно в JQuery считается плохой практикой. Все, что вам нужно сделать, это установить позицию на элемент в вашем CSS:

CSS

#help { 
    position: absolute; 
} 

Вы можете реорганизовать JQuery код, чтобы сократить его вниз резко, а также анимировать элемент в соответствии с требованиями:

var help; 

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

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

Вы должны установить положение с помощью CSS, в то же время ......

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

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

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

    help = !help; 
});