Question

我在同一条线上有三个div。您可以在此处查看示例：http://yoyo.ro/abw只需滚动到页面底部的三个框：Made to Measure，Instagram和Video Tracking。

当我点击左边的那个时，我希望其他两个向右滑动并显示一些文字。我试着这样做，但似乎我把它复杂化了，它甚至都不顺利。

function hideTest(){
         $(".instagram").addClass("slideout");
         $(".videotracking").addClass("slideout");
         $(".instagram").animate({left:"150%"},500);
         $(".videotracking").animate({left:"150%"},500);
         }
function showTest(){
         $(".instagram").animate({left:"33.3%"},500);
         $(".videotracking").animate({left:"66.6%"},500);
         $(".instagram").removeClass("slideout");
         $(".videotracking").removeClass("slideout");
         }

     $(".madetomeasure").on('click',function(){
         var testwidth = $(this).find(".vc_btn3-container").width();
         $(this).find(".vc_btn3-container").css("width", testwidth);

     if(!$(this).hasClass("openslide")){
         hideTest();
         $(".madetomeasure").addClass("openslide");
         $(this).find(".txtbox").animate({left:0},500);}

      else {
            $(this).find(".txtbox").animate({left:"-100%"},500);
            $(".madetomeasure").removeClass("openslide");
            showTest();
             }

         });

这里是与JS相关的css

   .txtbox{
-webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        width: 66.5%;
        display:none;
        left:-100%;
        padding:0px 15px;
        float:left;
        position:relative;}
   .instagram, .videotracking{position:static;}
   .instagram {left:33.3%;}
   .videotracking{left:66.5%;}
   .instagram.slideout{position:absolute;}
   .videotracking.slideout{position:absolute;}
   .madetomeasure .button{
     z-index:1;
     height:300px;
     background: url(http://yoyo.ro/abw/wp-content/uploads/2016/02/instagram.jpg) 100% 30% !important;
     border: none !important;}
   .madetomeasure.openslide {width:100%;}
   .madetomeasure.openslide .wpb_wrapper {display:flex;}
   .madetomeasure.openslide .txtbox {display:block;}

非常感谢您的耐心...... :)我真的很感激

Answer 1

据我所知，你的顺畅问题是因为：

jQuery更改每帧动画元素的内嵌样式。这是很多工作，如果你在动画制作时检查你的元素，你实际上可以看到动作。
CSS在动画left和right方面效果不佳。有很多关于此的文章，但如果您不想搜索，可以使用以下文章：https://css-tricks.com/tale-of-animation-performance/

解决方案

小提琴：https://jsfiddle.net/kv5twc64/1/

该解决方案非常常见，并且被许多CSS库使用，使用.active，CSS动画和一些JS的技巧。

我在transition使用了.card属性：

.card {
  display:inline-block;
  float:left;
  max-width:33.333%;
  position:relative;
  cursor: pointer;
  transition: 0.5s all ease-out;
}

如果您不知道，transition将在元素属性发生变化时创建补间效果。

这就是诀窍：使用~选择CSS中的兄弟姐妹和transform属性：

.card.active .desc {
  transform: translateX(0);
}

.card.active ~.card {
  transform: translateX(66.666vw);
}

在这种情况下使用CSS有几个好处：

您可以简化JS。 JS成了：

$(function(){
    $(".card").eq(0).click(function(){
    $(this).toggleClass("active");
  })
})

您可以改善网页效果
你可以在CSS中对（简单）缓动函数有更多选择（jQuery默认只提供“swing”）。看看这个：http://easings.net你可以这样做：
```
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
```

希望这可以提供帮助。但这里的教训是：尽可能使用CSS而不是JS！

P.S。 66.666vw表示视口宽度的宽度的2/3。

如何改进这个动画？

1 个答案:

解决方案