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:

  & 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;   

My CSS:

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

My Junkies:

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

Do you know what I'm doing wrong?

  should be $ ("  

  $ (" # wapperimg .slide ")  < / Pre> 

You should also remove .shown.slide from .slide

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

see here:

Comments

Popular posts from this blog

Java - Error: no suitable method found for add(int, java.lang.String) -

java - JPA TypedQuery: Parameter value element did not match expected type -

c++ - static template member variable has internal linkage but is not defined -