孩子们没有在动画父/包装元素中保持他们的位置答案

【问题标题】：Children not keeping their position within animated parent/wrapper element孩子们没有在动画父/包装元素中保持他们的位置
【发布时间】：2018-06-23 03:55:57
【问题描述】：

我有一个父元素，我将其设置为根据鼠标位置和移动对其位置进行动画处理。

我遇到的问题是孩子们没有“与”父母“一起”移动。我根本不希望他们在包装内的位置移动。我希望它与父母移动时保持在同一个地方，因为我只是为父母设置动画，但它似乎移动不同。一切都应该同时移动。

所以基本上它应该看起来像它在父移动时保持它的位置。所以它应该随着父母的移动而移动。而不是在里面蹦蹦跳跳。我做错了什么？

谢谢！

$(window).mousemove(function(event) {
  $(".mouse-mover").css({
    "margin-left": -(event.pageX * 0.03),
    "margin-top": -(event.pageY * 0.03)
  });
});

.Animated-Bottle-Wrap {
  display:block;
  width:241px;
  height:485px;
  background:rgba(128, 128, 128, 0.45);
  background-image: url("http://customlabeledwines.com/wp-content/uploads/2018/06/wine-hero.png");
}

.btl-sprite {
    background-image: url("http://customlabeledwines.com/wp-content/uploads/2018/06/btl-sprite.png");
    background-repeat: no-repeat;
    display: block;
    position:absolute;
    top:231px;
    margin-left:66px;
}

.btl-design {
    width: 83px;
    height: 127px;
    background-position: -5px -5px;
    top:235px;
    margin-left:65px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mouse-mover Animated-Bottle-Wrap">
<!-- Labels -->
<div id="label-slideshow" class="mouse-mover">
<div class="btl-design btl-sprite"></div>
</div>

【问题讨论】：

标签： jquery animation mousemove

【解决方案1】：

$(window).mousemove(function(event) {
 $(".mouse-mover").css({
    "-webkit-transform": "translate("+-(event.pageX * 0.03)+"px,"+ -(event.pageY * 0.03)+"px)"
   
  });


});

.Animated-Bottle-Wrap {
  display:block;
  width:241px;
  height:485px;
  background:rgba(128, 128, 128, 0.45);
  background-image: url("http://customlabeledwines.com/wp-content/uploads/2018/06/wine-hero.png");
}

.btl-sprite {
    background-image: url("http://customlabeledwines.com/wp-content/uploads/2018/06/btl-sprite.png");
    background-repeat: no-repeat;
    display: block;
    position:absolute;
    top:231px;
    margin-left:66px;
}

.btl-design {
    width: 83px;
    height: 127px;
    background-position: -5px -5px;
    top:235px;
    margin-left:65px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mouse-mover Animated-Bottle-Wrap">
<!-- Labels -->
<div id="label-slideshow" class="">
<div class="btl-design btl-sprite"></div>
</div>

【讨论】：