jquery - 如何同时缩放和移动？

Question

我有以下代码，它在鼠标悬停时缩放 div，但同时我想将其移动 10px 到顶部？有什么办法可以做到吗？

谢谢

.ad{
    background: url(frame.jpg);
    width: 980px;
    height: 50px;
    transition: all .4s ease-in-out;
}
$('.banner').on('mouseover', function() {
    var val = 0.4;
    $(".ad").css({
        '-webkit-transform': 'scale(' + val + ')',
        '-moz-transform': 'scale(' + val + ')',
        '-ms-transform': 'scale(' + val + ')',
        '-o-transform': 'scale(' + val + ')',
        'transform': 'scale(' + val + ')'
    });
});

Answer 1

使用 Jquery 的 addClass 方法，例如:

在 JavaScript 中

.ad{
        background: url(frame.jpg);
        width: 980px;
        height: 50px;
        transition: all .4s ease-in-out;
    }
$('.banner').on('mouseover', function() {
            var val = 0.4;
            $(".ad").addClass("ad-fly");
        });

在 CSS 中

.ad-fly{
    -webkit-transition-duration:1s;
    -webkit-transform:scale(0.4) translateY(10px);
}