CODEWITHSUNDEEP
jquerycssjquery-animate
Lawrence
Lawrence

Reputation: 727

Jquery Animate styling?

I'm still very new to JQuery. I don't seem to be able to get the following code to work. 

$('.announcement_panel_button').click(function(e){
    $('#site_logo').animate(function(){
        $(this).css('margin-top', '5px')
    }, 5000);
    e.preventDefault();
});

Or if there are some other way to rewrite this.

Upvotes: 1

Views: 76

Answers (2)

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13461

Your animate function's syntax is not right, try it like

$('.announcement_panel_button').click(function(e){
    $('#site_logo').animate({'margin-top':'5px'},5000);
    e.preventDefault();
});

Working Fiddle

Check the syntax on $.animate

As @Tats_innit explained in his answer, e.preventDefault(); might not be necessary if it's a simple button. It's needed when you want to prevent a default action like, clicking <a> tags takes you to new url or form submit.

Upvotes: 2

Tats_innit
Tats_innit

Reputation: 34107

Hiya demo http://jsfiddle.net/PCk7E/1/ or http://jsfiddle.net/PCk7E/ http://jsfiddle.net/PCk7E/1/show/

There is a click me button underneath image.

I have made a minor change. Rest you can see above post as well for sample demo.

Good read for APIs:

1) http://api.jquery.com/event.preventDefault/

2) http://api.jquery.com/animate/

I would recommend to read both.

preventDefault: If this method is called, the default action of the event will not be triggered. i.e. clicked anchors will not take the browser to a new URL. We can use event.isDefaultPrevented() to determine if this method has been called by an event handler that was triggered by this event.

Code

 $('.announcement_panel_button').click(function() {
    $('#site_logo').animate({
        'margin-top': +50
    }, 500);
    // e.preventDefault();
});​

Upvotes: 1

Related Questions