如何在loop-jQuery-animation中为CSS“clip”属性设置动画?

时间:2016-07-25 15:07:39

标签: javascript jquery animation

我想通过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不会动画。

感谢任何帮助,谢谢!!

2 个答案:

答案 0 :(得分:2)

我通过在二十二个代码中添加一个自定义事件来解决这个问题,然后我可以随时触发。如果你不想破解他们的代码,我想你可以扩展二十二,但我只是在他们的听众下面添加了以下代码:

$(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)

如果页面上有多个,您可以更改侦听器选择器并触发,但上面的内容对我有用。

答案 1 :(得分:1)

我遇到了同样的问题,并找到了一个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;
            }
        }
    }