如何动画循环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工作..我不知道为什么？

滑动箭头的动画工作，但不是效果（比较）本身不动画（功能：animateIMG）。 clip-css不会得到动画效果。

任何帮助表示赞赏，谢谢！

Answer 1

我解决了这个问题，在第二十个代码中添加了一个自定义事件，然后我可以随时触发。我想你可以延长twentytwenty如果你不想砍自己的代码，但我只是说他们的听众下面的下面的代码：

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

这使用jQuery的动画技巧，从0到动画到X，然后我只需在转换为十进制百分比后将其传递给第二十二个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; 
      } 
     } 
    }