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

在同一属性中添加每个转换，例如：

'transform': 'scale(' + val + ') translateY(-10px);'

（供应商前缀属性相同）

Answer 2

使用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);
}

Answer 3

在纯CSS上做： http://codepen.io/ArthyFiciel/pen/JYaYew

(function(angular, undefined) {
  "use strict";
  var am = angular.module('virtual-fitting');
  am.controller('raidingtherailsCtrl', function($state, $stateParams, raidingService) {
    var self = this;
    raidingService.stateID = $stateParams.id;
  });
})(angular);

在你的情况下：

Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration.Active
    .InstrumentationKey = "<InstrumentationKey>";
var tc = new TelemetryClient();
var request = new RequestTelemetry();
request.Context.User.Id = "1234";
request.Name = "Test Request";
tc.TrackRequest(request);

Answer 4

如果您向函数添加另一个css语句

，它应该有效

$('.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 + ')',
                    'margin-top': '-10px'
                });
            });

如何在同一时间扩展和移动？

4 个答案: