Question

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

我试图让课程持续5秒钟，意味着在5秒后删除课程.invisible 。我做了一个演示，当向下滚动到元素/类然后它得到窗口视图然后ViewportChecker删除.invisible类然后添加.visible类。

请参阅fiddle ＆gt;

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 
});

有任何方法只能在类.a上保持删除类5秒钟我的意思是ViewportChecker会立即删除类，所以我希望仅在{{.invisible上保持这个类5秒1}}。

Answer 1

删除给定的类，然后使用callbackFunction在setTimeout()内部延迟后添加类将完成这项工作： 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秒后删除课程

1 个答案: