简体   繁体   English

jQuery CSS图像溢出隐藏左过渡

[英]Jquery css image overflow hidden left transition

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. 我试图结合我的css和Jquery脚本,以显示一开始隐藏的图像,并通过向左过渡来显示它。

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. 我知道我可以通过使用剩余的动画来使用纯Jquery做到这一点,但是对于我的需要,我必须使用CSS并添加类。

My html: 我的html:

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

my css : 我的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: 我的Jquery:

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

Do you know what I'm doing wrong ? 你知道我在做什么错吗? Regards, Jarod 此致Jarod

You have a typo in 你有错字

$("#wappering .slide")

Should be 应该

$("#wapperimg .slide")

And also you should remove .slide from .shown .slide : 而且你也应该删除.slide.shown .slide

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

See here: http://jsfiddle.net/43WxB/ 看到这里: http : //jsfiddle.net/43WxB/

looks like your adding a class of shown to the image which has the class of slide... 看起来像您在图像中添加了具有幻灯片类别的show类...

Surely your CSS should look like this 当然,您的CSS应该看起来像这样

.slide.shown  {
transition: all ease 1s;
    left: 0;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM