我想通过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不会动画。
感谢任何帮助,谢谢!!
答案 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;
}
}
}