使用jCarousel实现动画效果

Question

使用jCarousel实现动画效果

javascriptjqueryhtmlcss

3

我正在使用jCarousel来制作图像幻灯片，但由于我是jQuery的新手，所以从jCarousel文档中无法确定如何应用不同的动画效果。

比如说，我有一张图片已经显示，现在想让当前图片缓慢消失，同时下一张图片在同一位置出现。我该如何实现这种效果？这需要编写新的JS函数进行自定义动画吗？还是可以通过jCarousel的设置来实现呢？

- Karine

你尝试过什么，有助于指导你吗？ - Starx

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fabrizio Fortino · Accepted Answer

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。