Question

I have this jQuery code:

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;
        }
    });

That basically just swaps css for an element, how can i introduce animate effects to so its not too jerky? Can you use .css inside .animate?

Answer 1

First of all, addinga/amending CSS properties directly in jQuery is considered bad practice. All you need to do is set the position on the element in your CSS:

CSS

#help {
    position: absolute;
}

You can then refactor your jQuery code to cut it down drastically, and also animate your element as required:

var help;

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