为“奇数”和“偶数”集重复相同的动画

Question

我正在努力熟悉jQuery waypoints。我想知道是否有任何方法可以简化以下代码。我尝试通过检查 item-* 的偶数/奇数并将其包装在 if else 函数中来做到这一点，但它不起作用。

    $('.features-task-management-item-1').css('opacity', 0);
    $('.features-task-management-item-1').waypoint(function() {
        $('.features-task-management-item-1').addClass('fadeInLeft');
    }, { offset: '70%' });
    $('.features-task-management-item-2').css('opacity', 0);
    $('.features-task-management-item-2').waypoint(function() {
        $('.features-task-management-item-2').addClass('fadeInRight');
    }, { offset: '70%' });
    $('.features-task-management-item-3').css('opacity', 0);
    $('.features-task-management-item-3').waypoint(function() {
        $('.features-task-management-item-3').addClass('fadeInLeft');
    $('.features-task-management-item-4').css('opacity', 0);
    $('.features-task-management-item-4').waypoint(function() {
        $('.features-task-management-item-4').addClass('fadeInRight');
    $('.features-task-management-item-5').css('opacity', 0);
    $('.features-task-management-item-5').waypoint(function() {
        $('.features-task-management-item-5').addClass('fadeInLeft');

    }, { offset: '70%' });

Answer 1

我对航点不太熟悉，但这是我的想法。 如果您可以将元素的类 (features-task-management-item-) 重命名为没有数字的类 (features-task-management-item)，请执行此操作。 如果你不能，那么你可以像这样使用 jquery selector $('[class^="features-task-management-item-"]')

所以重点是使用 JQuery each 方法遍历所有项目并使用索引作为偶数/奇数标记。

$('.features-task-management-item').each(function(i) {
    var index = i + 1;
    var $item = $(this);
    var isEven = index % 2 == 0;
    var fadeClass = isEven ? 'fadeInRight' : 'fadeInLeft';

    $item.css('opacity', 0);
    $item.waypoint(function() {
        $item.addClass(fadeClass);
    }, { offset: '70%' });
});

希望对你有所帮助