如何動畫循環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; 
      } 
     } 
    }