Question

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

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

我在网站上进行过渡效果时遇到问题？

1 个答案: