我试图合并我的css和Jquery脚本,以便显示隐藏在开头的图像并通过左转换显示它。
我知道我可以使用动画左边的纯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');
});
});
你知道我做错了什么吗? 问候, 贾罗德
答案 0 :(得分:0)
你输错了
$("#wappering .slide")
应该是
$("#wapperimg .slide")
此外,您应该从.slide
.shown .slide
.shown {
transition: 1s;
left: 0;
}
答案 1 :(得分:-1)
看起来像是在图像中添加了一个类,其中包含幻灯片...
肯定你的CSS应该是这样的
.slide.shown {
transition: all ease 1s;
left: 0;
}