javascript - 我在网站上做的过渡效果有问题？

Question

我试图产生一种效果，当我向下滚动大约 600 像素时，两张图片从外面开始，然后它们向内移动，靠得更近。但是当我这样做时，没有任何效果。

html:

<section id="services" class="services-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="container12" id="scroll">
                    <img src="img/phone.jpg" id="phone">
                    <img src="img/middle.jpg" id="middle">
                    <img src="img/tablet.jpg" id="tablet">
                </div>
            </div>
        </div>
    </div>
</section>

CSS:

#scroll {
margin-top: 200px;
margin-bottom: 200px;
text-align: center;
}

#scroll img {
position: relative;
}

.animate    {
transition: 2s ease-in0out;
-moz-transition: 2s ease-in0out;
-webkit-transition: 2s ease-in0out;
}

#phone .animate  {
transform: translate(5em,0);
-moz-transition: translate(5em,0);
-webkit-transition(5em,0);  
}

#tablet .animate  {
transform: translate(-10em,0);
-moz-transition: translate(-10em,0);
-webkit-transition(-10em,0); 
}


#phone .animate  {
transform: translate(5em,0);
-moz-transition: translate(5em,0);
-webkit-transition(5em,0);
}

#tablet .animate  {
transform: translate(-10em,0);
-moz-transition: translate(-10em,0);
-webkit-transition(-10em,0); 
}

js:

$(document).ready(function()    {


$(window).scroll(function(event)    {
    var y = $(this).scrollTop();

    if (y >= 400)   {

        $('#phone').addClass('animate');
        $('#tablet').addClass('animate');

    }

});

});

如果你能帮我解决这个问题，我会很高兴。再次感谢您帮助我。

Answer 1

看起来您的代码正在向 #phone 和 #tablet 元素添加类。但是，您的 CSS 是用来处理带有 .animate 类的子元素的。你的 CSS 应该这样写:

#phone.animate  {
transform: translate(5em,0);
-moz-transition: translate(5em,0);
-webkit-transition(5em,0);  
}

#tablet.animate  {
transform: translate(-10em,0);
-moz-transition: translate(-10em,0);
-webkit-transition(-10em,0); 
}

#phone.animate  {
transform: translate(5em,0);
-moz-transition: translate(5em,0);
-webkit-transition(5em,0);
}

#tablet.animate  {
transform: translate(-10em,0);
-moz-transition: translate(-10em,0);
-webkit-transition(-10em,0); 
}