You have a typo in
$("#wappering .slide")
Should be
$("#wapperimg .slide")
And also you should remove .slide
from .shown .slide
:
.shown {
transition: 1s;
left: 0;
}
See here: http://jsfiddle.net/43WxB/
質問
I'm trying to combine my css and Jquery script in order to show an image which is at the beginning hidden and show it by doing a left transition.
I know that I can do it with pure Jquery by using animate left, but for my need, I must use css and add the class.
My html:
<div id="wapperimg">
<img class="slide" src="http://lorempixel.com/400/200/sports/1/" />
</div>
<button id="ok">ok</button>
my 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;
}
my Jquery:
$(document).ready(function() {
$('#ok').click(function() {
$("#wappering .slide").addClass('shown');
});
});
Do you know what I'm doing wrong ? Regards, Jarod
解決
You have a typo in
$("#wappering .slide")
Should be
$("#wapperimg .slide")
And also you should remove .slide
from .shown .slide
:
.shown {
transition: 1s;
left: 0;
}
See here: http://jsfiddle.net/43WxB/
他のヒント
looks like your adding a class of shown to the image which has the class of slide...
Surely your CSS should look like this
.slide.shown {
transition: all ease 1s;
left: 0;
}