jquery - Jquery动画样式？

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

工作小提琴

检查$.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) http://api.jquery.com/animate/

我会建议阅读两者。

preventDefault:如果调用该方法，则不会触发事件的默认动作。即单击的锚点不会将浏览器带到新的 URL。我们可以使用 event.isDefaultPrevented() 来确定该方法是否已被由该事件触发的事件处理程序调用。

代码

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