JQuery Animate styling?

Question

Я все еще очень новичок в JQuery. Кажется, я не могу заставить следующий код работать.

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

Или, если есть другой способ переписать это.

Answer 1

синтаксис вашей animate функции является не верно, попробуйте как

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

Working Fiddle

Проверьте синтаксис на $.animate

Как пояснил @Tats_innit в своем ответе, e.preventDefault(); может не потребоваться, если это простая кнопка. Это необходимо, если вы хотите предотвратить действие по умолчанию, например, clicking <a> tags takes you to new url или form submit.

Answer 2

Хийя демоhttp://jsfiddle.net/PCk7E/1/илиhttp://jsfiddle.net/PCk7E/ http://jsfiddle.net/PCk7E/1/show/

Существует click me кнопку под изображением.

Я внес незначительные изменения. Остальное вы можете увидеть выше, а также примерную демонстрацию.

Хорошее чтение для API:

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

2)

Я рекомендовал бы читать как.

preventDefault: Если этот метод вызывается, действие по умолчанию для события не будет инициировано. т. е. нажатые якоря не будут использовать браузер для нового URL-адреса. Мы можем использовать event.isDefaultPrevented(), чтобы определить, был ли этот метод вызван обработчиком событий, который был вызван этим событием.

Код

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