html - Jquery css image overflow hidden left transition -
I am trying to combine a CSS and Jquery script so that an image appears which is hidden at the beginning and it Show the transition left.
I know that I can do this with pure jacquery leaving animate, but for my requirement, I have to use CSS and have to add the class.
My html: My CSS: My Junkies: Do you know what I'm doing wrong? You should also remove see here:
& lt; Div id = "wapperimg" & gt; & Lt; Img class = "slide" src = "http://lorempixel.com/400/200/sports/1/" /> & Lt; / Div & gt; & Lt; Button ID = "OK" & gt; Ok & lt; / Button & gt;
#wrapperimg {status: relative; Hidden flurry; Width: 100px; Height: 100 pixels; Limit: 1px solid black; } .slide {status: absolute; Hidden flurry; Left: -100px; Width: 100px; Height: 100 pixels; Infection: 1s; } .shown .slide {transition: 1s; Left: 0; }
$ (document) .ready (function () {$ ('# ok') click (function () { $ ("#weeppering .slide"). AddClass ('shown');});});
should be $ ("
$ (" # wapperimg .slide ") < / Pre>
.shown.slide from
.slide
.shown {transition: 1s; left : 0;}
Comments
Post a Comment