用jCarousel动画

时间:2012-03-04 10:03:21

标签: javascript jquery html css

我正在使用jCarousel作为图片滑块。我是jQuery的新手,所以从jCarousel文档中我无法弄清楚如何应用不同的动画效果。

假设我在一个切片上有一个图像,我希望视图图像慢慢消失,同时下一个图像出现在同一个地方。我怎样才能达到这个效果?它是一个自定义动画,需要编写一个新的JS函数,还是可以通过设置jCarousel来完成?

1 个答案:

答案 0 :(得分:3)

Karine,我相信你应该使用 easing 配置属性。 http://sorgalla.com/projects/jcarousel/#Configuration

您可以在此处指定要使用的jquery缓动效果(http://api.jquery.com/animate/)。如果您还需要其他东西,可以创建自定义动画。在这里,您可以看到示例http://sorgalla.com/projects/jcarousel/examples/special_easing.html

或者,您可以使用以下代码获得所需的效果:

<script type="text/javascript">
function carouselFadeOut(carousel) {
  var clipId = carousel.clip.context.id;
  $('#' + clipId).fadeOut();
}

function carouselFadeIn(carousel) {
  var clipId = carousel.clip.context.id;
  $('#' + clipId).fadeIn();
}


jQuery(document).ready(function() {
  jQuery('#mycarousel').jcarousel({visible : 1, scroll : 1, 

    itemLoadCallback: {
      onBeforeAnimation: carouselFadeOut,
      onAfterAnimation: carouselFadeIn
    }
  });
});

希望它有所帮助,Fabrizio