Question

所以，我试图创建一个平滑的动画动画（左右）。

有2个画廊将移出页面/进入页面。它应该在水平轴上移动（足够有趣）。我已经尝试在jQuery中设置左边缘的动画，但是它很糟糕且很笨拙。以下是我尝试的内容片段：

  $('.navArrowRight').click(function (){
    $('.galleri_container').animate({'margin-left':'-105.5%'}, 1000);
    toggle();
});
$('.navArrowLeft').click(function (){
    $('.galleri_container').animate({'margin-left':'0'}, 1000);
    toggle();
});

我需要它顺利移动，但我还没有能够破解如何做的代码。我希望你们堆叠，可以帮忙！

所以再次：我需要它在水平轴上移动，一个galleri移动到图片中，另一个移出它。他们都使用班级.galleri_container，而且正在移动。

由于

Answer 1

您可以使用CSS3动画，而不是使用JS制作边距动画，这些动画大多数都更平滑，并且在运行时使用的CPU / GPU更少。

尝试使用此CSS，对于动画，只需使用jQuery更改元素类（在上一个，活动和下一个之间）。

.galleri_container.active {
    margin-left: 0%;
    -webkit-transition: all 1s ease;                  
    -moz-transition: all 1s ease;                 
    -o-transition: all 1s ease;   
    -ms-transition: all 1s ease;          
    transition: all 1s ease; }

.galleri_container.previous {
        margin-left: -105.5%; }

.galleri_container.next {
            margin-left: 105.5%; }

jQuery动画我janky

1 个答案: