在 ViewportChecker 上 5 秒后删除 class

Question

我正在使用 ViewportChecker jquery 插件，该脚本检测元素是否在视口中并向其添加或删除 class。

我正在尝试按住 class 5 秒，意味着在 5 秒后移除 class .invisible。我做了一个演示，当向下滚动到 element/class 然后它得到 window 视图然后 ViewportChecker 删除 .invisible class 然后添加 .visible class.

见fiddle>

HTML:

<div class='parent-div'>
<div class="a invisible"> <!-- Content -->
New blog writers everywhere are faced with a serious dilemma when they first reach the Internet and must decide which blogging platform is best for their new website. There are actually dozens of options on the market, ranging from the basic blog settings of the social networks to the self-hosted open sources software solutions.
</div>
    <br></br>    
<div class="b invisible"> <!-- Content -->
New blog writers everywhere are faced with a serious dilemma when they first reach the Internet and must decide which blogging platform is best for their new website. There are actually dozens of options on the market, ranging from the basic blog settings of the social networks to the self-hosted open sources software solutions.
</div>

</div> <!--main div end-->

JS:

// For Class a
$('.a').viewportChecker({
    classToAdd: 'visible', // Class to add to the elements when they are visible
    classToRemove: 'invisible', // Class to remove before adding 'classToAdd' to the elements
    offset: 2, // The offset of the elements (let them appear earlier or later). This can also be percentage based by adding a '%' at the end
    invertBottomOffset: true, // Add the offset as a negative number to the element's bottom
    repeat: false, // Add the possibility to remove the class if the elements are not visible
    callbackFunction: function(elem, action){}, // Callback to do after a class was added to an element. Action will return "add" or "remove", depending if the class was added or removed
    scrollHorizontal: false 
});

有任何方法可以在 class 上保持删除 class 5 秒 .a 我的意思是 ViewportChecker 会立即删除 class，所以我想保持此 class .invisible 仅在 <div class="a invisible">.

上持续 5 秒

Answer 1

删除给定的 classes 然后在 callbackFunction 内使用 setTimeout() 延迟后添加 class 将完成工作：DEMO

// For Class a
$('.a').viewportChecker({
    classToAdd: 'visible', // Class to add to the elements when they are visible
    classToRemove: 'invisible', // Class to remove before adding 'classToAdd' to the elements
    offset: 2, // The offset of the elements (let them appear earlier or later). This can also be percentage based by adding a '%' at the end
    invertBottomOffset: true, // Add the offset as a negative number to the element's bottom
    repeat: false, // Add the possibility to remove the class if the elements are not visible
    callbackFunction: function(elem, action){
        $('.a.visible').addClass('invisible').removeClass('visible');
        setTimeout(function(){
            $('.a.invisible').addClass('visible').removeClass('invisible');
        },5000);
    }, // Callback to do after a class was added to an element. Action will return "add" or "remove", depending if the class was added or removed
    scrollHorizontal: false 
});


// For Class b
$('.b').viewportChecker({
    classToAdd: 'visible', // Class to add to the elements when they are visible
    classToRemove: 'invisible', // Class to remove before adding 'classToAdd' to the elements
    offset: 2, // The offset of the elements (let them appear earlier or later). This can also be percentage based by adding a '%' at the end
    invertBottomOffset: true, // Add the offset as a negative number to the element's bottom
    repeat: false, // Add the possibility to remove the class if the elements are not visible
    callbackFunction: function(elem, action){
        $('.b.visible').addClass('invisible').removeClass('visible');
        setTimeout(function(){
            $('.b.invisible').addClass('visible').removeClass('invisible');
        },5000);
    }, // Callback to do after a class was added to an element. Action will return "add" or "remove", depending if the class was added or removed
    scrollHorizontal: false
});

在 ViewportChecker 上 5 秒后删除 class

Remove class after 5 second on ViewportChecker

html

javascript

jquery

viewport

removeclass