0

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

我想做的是改变它，这样它就不需要点击来显示。我希望在页面加载大约 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中添加代码- 谢谢。

4

1 回答 1

0

很简单：用你所做的做一个函数，.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()

于 2012-06-26T09:38:39.723 回答