jquery css 图片溢出隐藏左转

Question

我正在尝试结合我的 css 和 Jquery 脚本来显示一开始隐藏的图像，并通过向左过渡来显示它。

我知道我可以通过使用 animate left 使用纯 Jquery 来完成它，但是根据我的需要，我必须使用 css 并添加类。

我的 html:

<div id="wapperimg">
<img class="slide" src="http://lorempixel.com/400/200/sports/1/" />
</div>
<button id="ok">ok</button>

我的CSS:

#wrapperimg {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px; 
    border: 1px solid black;
}

.slide {
    position: absolute;
    overflow:hidden;
    left: -100px;
    width: 100px;
    height: 100px;
    transition: 1s;
}
.shown .slide {
transition: 1s;
    left: 0;
}

我的 Jquery:

$(document).ready(function() {
  $('#ok').click(function() {
$("#wappering .slide").addClass('shown');
   });
}); 

你知道我做错了什么吗？问候，贾罗德

Answer 1

输入错误

$("#wappering .slide")

应该是

$("#wapperimg .slide")

你还应该从 .shown .slide 中删除 .slide:

.shown {
transition: 1s;
    left: 0;
}

参见此处:http://jsfiddle.net/43WxB/