将现有的jQuery从点击功能转换为延迟自动显示

Converting existing jQuery from click function to auto display with delay

本文关键字：转换 延迟 显示 功能 jQuery      更新时间：2023-09-26

目前，主页文本仅通过启动滑出的单击功能显示。

我想做的是更改它，使其不需要单击即可显示。我希望文本在页面加载大约 3 秒后显示（淡入）。

这是我目前所拥有的：-

$('.introbox span').replaceWith(function(){
return ''
    <div class="slideOutTip '+$(this).attr('class')+'" style="'+$(this).attr('style')+'">'
        '
        <div class="tipVisible">'
            <div class="tipIcon"><div class="plusIcon"></div></div>'
            <span class="tipTitle">'+$(this).attr('title')+'</span>'
        </div>'
        '
        <div class="slideOutContent">'
            <p>'+$(this).html()+'</p>'
        </div>'
    </div>';
});

当单击"plusIcon"时，文本会滑出并可见。

监听点击功能是...

$('.tipVisible').bind('click',function(){
    var tip = $(this).parent();

所以我假设这是我需要转换使用自动加载所必需的地方，也许是 setDelay 和 FadeIn，尽管我不是 100%。

请有人建议如何将其更改为不使用单击而是在延迟后自动显示？提前谢谢。

尝试在 jsfiddle 中添加代码，如果更容易看到我正在尝试做什么 - 谢谢。

非常简单：用你在.tipVisible.click做的事情创建一个函数，然后设置一个window.setTimeout(yourFunction, 3000);

@Comment：你的JS已经很复杂了，我可能会重新组织和重新编码所有内容，这样我就可以给你一个提示，告诉你如何实现它（当我把它添加到你的小提琴中时没有立即工作，但我有点懒得在那里找到问题）。

    var animate = function(obj) {
        var tip = obj ? $(obj).parent() : $(".tipVisible").parent();
        /* If a open/close animation is in progress, exit the function */
        if (tip.is(':animated')) return false;
        if (tip.find('.slideOutContent').css('display') == 'none') {
            tip.trigger('slideOut');
        }
        else tip.trigger('slideIn');
    }
    window.setTimeout( animate, 3000);
    $('.tipVisible').bind('click', function() {
        animate(this);
    });

编辑：好吧，这至少在做一些事情，现在你必须弄清楚何时以及如何;)需要做什么

PS：你使用了jQuery，但加载了Mootools框架...Mootools 不知道 $（document）.ready（）

相关文章：