Question

我需要我的代码如下：当我从一个部分滚动到另一个部分向上或向下独立滚动时，请在当前部分中包含.compass-areas-centered和.bg-areas分类。

HTML

下面的代码生成动态

部分

<?php foreach ( $items as $k => $post ) : setup_postdata( $post ); ?>

<div class="section">

    <div class="large-12 columns compass-areas">

        <img src="<?php echo $secaoImgUrl[0]; ?>" class="bg-areas" />

        <div class="compass-areas-centered">
            <!-- .compass-areas-centered -->
        </div>

    </div>

</div><!-- .section -->

<?php endforeach; wp_reset_postdata(); ?>

JS

 onLeave: function( index, nextIndex, direction ){

        var leavingSection = $(this);

        // AFTER LEAVE HOME APPLY FX IN COMPASS
        if( index == 1 && nextIndex == 2 ){
            $( '.compass-areas-centered' ).toggleClass( 'animated fadeInDown' );
            $( '.bg-areas' ).toggleClass( 'animated fadeInUp' );
        }

        if( index == 2 && nextIndex == 3 ){
            $( '.compass-areas-centered' ).toggleClass( 'animated fadeInDown' );
            $( '.bg-areas' ).toggleClass( 'animated fadeInUp' );
        }

        if( index == 3 && nextIndex == 4 ){
            $( '.compass-areas-centered' ).toggleClass( 'animated fadeInDown' );
            $( '.bg-areas' ).toggleClass( 'animated fadeInUp' );
        }

        if( index == 4 && nextIndex == 5 ){
            $( '.compass-areas-centered' ).toggleClass( 'animated fadeInDown' );
            $( '.bg-areas' ).toggleClass( 'animated fadeInUp' );
        }

    }

JS FIDDLE https://jsfiddle.net/y3barsq6/ GIF 有时我需要回到效果工作 http://giphy.com/gifs/l3V0Bhrg1PJ33HMBi

Answer 1

您似乎正在使用animate.css库。

在动画完成后，只需阅读in the docs推荐的删除类的方法：

$.fn.extend({
    animateCss: function (animationName) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        $(this).addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);
        });
    }
});

然后使用：

$('#yourElement').animateCss('bounce');

Fullpage.js如何动态转换

1 个答案: