Question

我无法让transitioning使用div使用positioning relative并使用jQuery将css设置为left -50px。请参阅小提琴以获得更好的解释:)。

转换不适用于定位设置吗？任何其他解决方案，使图片div滑入其内部/下方的父母div？

提前致谢

http://jsfiddle.net/hde2ts30/4/

Answer 1

您应该将其更改为JS中的.css('.margin-left', '-50px');

JS Fiddle

Answer 2

你的HTML需要一些刷新。

您有三个ID为picture的不同元素。 ID在页面上是唯一的。因为您添加了这些额外的ID元素，所以您将过渡应用于错误的元素。

您更新的HTML如下所示：

<div id="picture_container">
    <div id="picture">
        <img class="picture" src="http://omgdgt.com/images/04042014/website-of-the-day-jsfiddle-written-by-web-developers-for-web-developers-0.jpg" />
        <img class="picture" src="http://doc.jsfiddle.net/_downloads/jsfiddle-desktop-1440x900-a.png" />
     </div>
</div>

您更新的CSS如下所示：

#picture_container{
    width:20px;
    overflow:hidden;
}
#picture{
    white-space:nowrap;
    position:relative;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    left: 0;
    width:20px;
    display:inline-block; 
}
.picture{
    width: 20px;   
}

我们在这里做的是将过渡应用到图片滑动容器，而不是同时应用所有三个元素。由于“左”变换仅应用于div，因此您只是将其滑动并将图片静态放置在其容器中。

但这是重要的一部分：没有开始状态就不会发生转变

因为您的容器开头没有left值，所以 nothing 无需转换。所以它只是跳到left:-20px，因为它是它必须计算的唯一值。

为了使转换有效，值需要初始状态和结束状态

Div推动其他div

2 个答案: