在没有插件的情况下向此悬停效果添加旋转

Question

所以当我将鼠标悬停在"#header"上时，这段代码将".now"向上移动 20px，然后在我悬停时将其收回。

$(document).ready(function() {
    $('#header')
        .hover(function() {
            $(".now").stop().animate({ top: -20 }, 'fast');
        }, function() {
            $(".now").stop().animate({ top: 0 }, 'fast');
        });
});

如何将".now"旋转 45 度以及移动它？

Answer 1

旋转元素建立在 CSS3 样式之上，该样式在各种现代浏览器中的处理方式不同......

因此，虽然有一些方法可以在没有插件的情况下做到这一点，但使用像jQuery Transit这样的好jQuery插件有助于简化实现所需效果所需的代码（就像jQuery本身一样）。