0

我有一个循环，在页面下方按顺序显示工具提示。一个 div 将打开几秒钟，然后关闭，然后另一个 div 将在页面下方打开，然后关闭，等等。

如何让浏览器在没有点击功能的情况下自动滚动到每个 div？

我的循环 JavaScript 如下所示：

    function fadeLoop() {

    var counter = 0,
        divs = $('.fader').css('visibility','visible').hide(),
        dur = 100;

    function showDiv() {
        divs.fadeOut(dur) // hide all divs
            .filter(function(index) {
                return index == counter % divs.length;
            }) // figure out correct div to show
            .delay(dur) // delay until fadeout is finished
            .fadeIn(dur); // and show it
        counter++;
    }; // function to loop through divs and show correct div
    showDiv(); // show first div    
    return setInterval(function() {
        showDiv(); // show next div
    }, 5 * 1000); // do this every 5 seconds    
};

$(function() {
    var interval;

    $(".start").click(function() {
        if (interval == undefined){
            interval = fadeLoop();
            $(this).val("Stop");
        }
        else{
            clearInterval(interval);
            $(this).val("Start");
            interval = undefined;
        }
    });
});

因此，当我单击“开始”时 - 循环开始。我希望视图与打开的 div 流保持一致。

提前致谢。

4

2 回答 2

0

改变：

.fadeIn(dur);

至：

.fadeIn(dur, function() {
    $(this).focus();
});

http://api.jquery.com/fadeIn/

于 2013-05-10T19:40:33.040 回答
0

看看https://github.com/Arwid/jQuery.scrollIntoView，已经用过几次了，效果很好。还有另一个类似的插件，但这个更完整和稳定（个人意见）。您只需使用：

$("#some_element").scrollIntoView();

Github 页面上提供了更多选项。无论如何..听起来你正在做一些类似“导游”的事情。如果是这种情况，另一个不错的选择是：http ://bootstraptour.com/尽管它基于 Bootstrap 代码（无论如何占用空间都非常小）。

希望这可以帮助！

于 2013-05-10T20:02:24.843 回答