0

我正在使用 Velocity.js 和 Blast.js 在每个单词中创建一个简单的加载作为动画......基本设置之一。我也在 Cycle2 旁边使用它。

我有一些我试图实现的问题，我无法从文档中解决。“速度/爆炸功能”可以存在于整个循环 2 滑块中的许多幻灯片上，因此每次都需要重新运行。

这就是我想要实现的目标：

  1. Velocity 动画每次都需要从 opacity:0 开始......所以当你循环到幻灯片时，它会从 0 运行到 1，而不是显示它，然后隐藏它，然后运行动画。
  2. 当您循环下一个/上一个滑块时，它应该像以前一样重新运行并从 0 开始。
  3. 删除每个单词的过渡/淡入淡出，并将其作为显示/隐藏。

我希望这是有道理的。我已经创建了一个简单的 JSFiddle 来向您展示基本设置以及我到目前为止所拥有的内容。希望你能帮忙。

http://jsfiddle.net/h3vo8LL1/1/

//
function featuredProjectTextAnimation() {
    $('.home-section-container .each-section .each-slide.text .text-container.animated')
    .blast({ 
        delimiter: 'word' 
    })
    .velocity('transition.fadeIn', {
        display: null,
        duration: 0,
        stagger: 100,
        delay: 400,
        begin: function() { 
            //
        },
        complete: function() { 
            //
        }
    });
}

//
if ($('.home-slider-container').length > 0) {
    $('.home-slider-container .home-slider').each(function() {
        var $this = $(this);
        var slideCount = $this.find('.each-slide').length;
        if (slideCount <= 1) {
            $this.next('.home-slider-pager').remove();
            $this.prev('.home-slider-navigation').remove();
        }
        $this.cycle({
            fx: 'fade',
            slides: '> .each-slide',
            caption: $this.next('.home-slider-pager'),
            captionTemplate: '{{slideNum}}/{{slideCount}}',
            sync: true,
            timeout: 0,
            random: false,
            pagerActiveClass: 'active',
            next: $this.prev('.home-slider-navigation').find('.next'),
            prev: $this.prev('.home-slider-navigation').find('.prev'),
            loader: true,
            autoHeight: 'container',
            swipe: true
        });
        $this.on('cycle-before', function() {

        });
        $this.on('cycle-after', function() {
            featuredProjectTextAnimation();
        });
    });
}
4

1 回答 1

4

给你：http: //jsfiddle.net/h3vo8LL1/2/。你有两个问题：

  1. 您需要将传入的幻灯片元素传递给featuredProjectTextAnimation()并在其中找到该.animated元素，而不是选择所有文本幻灯片。
  2. 您需要将每张幻灯片最初隐藏，例如，我opacity在传出幻灯片元素上设置为 0，然后begin将其设置为 1。您也可以使用display: none或任何适合您的方式。

！

于 2015-02-22T08:28:08.400 回答