jquery - 如何从边距 : Auto? 移动图像

Question

我在一个响应式网站上工作，我在整个网络上都找遍了，但没有找到答案。

我正在尝试为最初将边距设置为自动的图像设置动画，然后将其设置为特定位置的动画(即:margin-top: 4px & margin-left: 30px)。由于边距设置为自动，我所做的任何事情都会使其移动跳跃 - 但图像需要在移动设备的中间水平响应作为其初始状态并平滑地动画。

HTML:

<div class="logoWrapper">
    <img class="logo" src="some.png"/>
</div>

CSS:

.logo {
    display: block;
    width: 90px;
    height: 90px;
    margin-top: 90px;
    margin-left: auto;
    margin-right: auto;
    z-index: 14;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
}
.logoShrink {
    margin-top: 4px;
    width: 20px;
    height: 20px;
}
.logoWrapper {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 15;
}

jQuery:

jQuery('.logo').addClass('logoShrink');

我知道这对很多人来说都是一个问题，但我找不到任何有效的方法；让我们在这里得到一个真正的解决方案。任何帮助将不胜感激。谢谢!!

Answer 1

我建议使用 position: absolute 和 left: 50% 以及 margin-left: -50% 将图像居中。可以做到，因为它的parent是position: fixed。

.logo {
    display: block;
    position: absolute;
    width: 90px;
    height: 90px;
    margin-left: -45px;
    left: 50%;
    top: 90px;
    z-index: 14;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
}

在那之后，转换顶部、左侧和左边距将执行您想要的操作。