Jquery Div推送其他Div'；s

我无法使用

定位相对
并使用jQuery将css设置为
左-50px
使
转换
为
div
工作。有关更好的解释，请参见小提琴：）

转换是否不适用于定位设置？是否有其他解决方案可以使图片分区滑入父分区内/下方

提前谢谢

您应该将其更改为
.css（'.margin left'，'-50px'）

您应该将其更改为
.css（'.margin left'，'-50px'）

您的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>

#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;   
}

我们在这里做的是将转换应用到图片滑动容器，而不是同时应用所有三个元素。由于“left”变换只应用于div，因此您只需滑动它，并使图片在其容器中保持静态

但这里有一个重要的部分：没有启动状态就不会发生转换

因此，因为您的容器一开始没有
left
值，所以它没有任何可转换的内容。所以它只跳到左边：-20px，因为它是唯一的计算值

为了使转换生效，值需要初始状态和结束状态
您的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>

#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;   
}

我们在这里做的是将转换应用到图片滑动容器，而不是同时应用所有三个元素。由于“left”变换只应用于div，因此您只需滑动它，并使图片在其容器中保持静态

但这里有一个重要的部分：没有启动状态就不会发生转换

因此，因为您的容器一开始没有
left
值，所以它没有任何可转换的内容。所以它只跳到左边：-20px，因为它是唯一的计算值

为了使转换生效，值需要初始状态和结束状态
您也可以使用
left
执行转换。只需指定初始的
left
位置：您也可以使用
left
进行操作。只需指定初始<代码>左位置：不知道如果没有启动状态，转换不会发生，听起来很合乎逻辑。工作很有魅力，谢谢你提供的详细信息！每天都在学习新的东西，哈哈（y）不知道没有开始状态就不会发生转变，尽管听起来很合乎逻辑。工作很有魅力，谢谢你提供的详细信息！每天都在学习新的东西哈哈（y）