如何在loop-jQuery动画中动画CSS“剪辑”属性？

Question

我想要动画的滑块的二十插件由zurb。(http://zurb.com/playground/twentytwenty) Github：https://github.com/zurb/twentytwenty

这是我目前所拥有的：

$(".twentytwenty-container").twentytwenty({
  default_offset_pct: 0.15, // How far to the left the slider should be
  move_slider_on_hover: true // Move slider on mouse hover?
});
var leftOffset = parseInt($(".twentytwenty-handle").css("left"), 10);

function animation() {
  var options = {
    duration: 650,
    easing: 'swing'
  };
  $('.twentytwenty-container')
    .find('.twentytwenty-handle')
    .animate({
      left: leftOffset + 5 + "px"
    }, options)
    .animate({
        left: leftOffset - 5 + "px"
      },
      $.extend(true, {}, options, {
        complete: function() {
          animation();
        }
      })
    );
}

function animationIMG() {
  var options = {
    duration: 650,
    easing: 'swing'
  };
  $('.twentytwenty-container')
    .find('.twentytwenty-before')
    .animate({
      clip: "rect(0px " + leftOffset + 5 + "px 856px 0px)"
    }, options)
    .animate({
        clip: "rect(0px " + leftOffset - 5 + "px 856px 0px)"
      },
      $.extend(true, {}, options, {
        complete: function() {
          animationIMG();
        }
      })
    );
}
setTimeout(function() {
  animation();
  animationIMG();
}, 1500);
$('.twentytwenty-container').mouseenter(function() {
  $(".twentytwenty-handle").stop(true).fadeTo(200, 1);
  $(".twentytwenty-before").stop(true).fadeTo(200, 1);
});
$('.twentytwenty-container').mouseleave(function() {
  leftOffset = parseInt($(".twentytwenty-handle").css("left"), 10);
  animation();
  animationIMG();
});

无法进行小提琴，因为插件在jsfiddle上不起作用。我也不知道原因?

滑动箭头的动画有效，但效果(比较)本身不会动画(function: animateIMG)。clip-css不会有动画效果。

感谢您的帮助，谢谢！

Answer 1

我通过在twenty20代码中添加一个自定义事件来解决这个问题，然后我可以在需要的时候触发它。如果你不想黑掉他们的代码，我想你可以扩展twenty20，但我只是在他们的监听器下面添加了以下代码：

$(window).on("slidein", function(e,pct){
  $({slide:0}).animate({slide:pct}, {
    duration: 2000,
    step: function(val){
      adjustSlider(val/100)
    }
  })
});

这使用了一个jquery动画技巧从0到X，然后在转换为十进制百分数后，我将其传递给twenty20 adjustSlider方法。

在我的应用程序中，我通过以下方式触发此事件：

$(window).trigger('slidein', 50)

如果页面上有多个监听器选择器和触发器，您可以更改它们，但上面的方法对我有效。

Answer 2

我也遇到了同样的问题，并找到了使用SCSS的解决方案。我只是想单击或拖动。点击应该是动画的。

由于调整大小(Rect)和重新定位，过渡可以正常工作。拖动容器时，类处于活动状态，因此可以再次关闭过渡。

    .twentytwenty-container {
        img {
            height: auto;
            max-height: 2000px;

            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        .twentytwenty-handle {
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        &.active {
            img, .twentytwenty-handle {
                -webkit-transition: none;
                -moz-transition: none;
                -o-transition: none;
                transition: none;
            }
        }
    }