loop-jQuery-animationのCSS "clip"プロパティをアニメーション化する方法は？

Question

私は22のプラグインのスライダーを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コードにカスタムイベントを追加することで解決しました。私はあなたが彼らのコードをハックしたくない場合は、twentytwentyを拡張することができたと、私はちょうど彼らのリスナーの下に次のコードを追加しました：私は、これはXに0からアニメーション化するためにjqueryのアニメーションのトリックを使用しています

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

を小数点以下のパーセント値に変換した後、それをtwentytwentyの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; 
      } 
     } 
    }