Using .animate and .css or just one in jQuery

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?

Have a look at the documentation. For an animated version, use jQuery UI toggleClass. — Rob W
– Rob W, Commented Mar 15, 2012 at 12:20

Rory McCrossan · Accepted Answer · 2012-03-15 12:19:23Z

3

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

answered Mar 15, 2012 at 12:19

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

benhowdle89 Over a year ago

Short, intelligent, efficient. hat tip

benhowdle89 Over a year ago

help = !help; can you expand on this slightly please? Does it set a variable to the opposite of its current value?

Rory McCrossan Over a year ago

@benhowdle89 that's correct - it will invert a boolean value.

rahul · Accepted Answer · 2012-03-15 12:19:14Z

2

A working demo

#help
{
    position: absolute;
}

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

answered Mar 15, 2012 at 12:19

rahul

188k50 gold badges239 silver badges266 bronze badges

Comments

Hamza Waqas · Accepted Answer · 2012-03-15 12:15:16Z

0

Try to code less and more efficient way.

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

Hope, you'are looking for the same.

answered Mar 15, 2012 at 12:15

Hamza Waqas

6274 silver badges12 bronze badges

1 Comment

Hamza Waqas Over a year ago

I had given you the logic that about how to start up. What sort of animation you want? You want me to give the exact code? Your code exist on jsfiddle?

Prisoner ZERO · Accepted Answer · 2012-03-15 12:25:31Z

0

You should set the position using CSS, in the meantime......

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

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

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

     help = !help;
});

answered Mar 15, 2012 at 12:25

Prisoner ZERO

14.2k21 gold badges103 silver badges150 bronze badges

Collectives™ on Stack Overflow

Using .animate and .css or just one in jQuery

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related