Question

如何使用jquery和bootstrap 3弹出窗口创建动画，因此第一个4秒的弹出窗口然后隐藏，然后另一个显示并且它像这样循环。

javascript代码：

$(document).ready(function() {
//popover homepage
    $('#recorobert').popover({
        placement : 'top',
        html : 'true',
        content : '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p class="small">- Robert Bäckström, kampanjen <a href="#">Movember är här</a></p>',
        trigger : 'click'
    });
    $('#recoanna').popover({
        placement : 'top',
        html : 'true',
        content : '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p class="small">- Anna Kristensen, kampanjen <a href="#">Varför apor aldrig bär rosa klänning</a></p>',
        trigger : 'click'
    }); 
    $('#recochristian').popover({
        placement : 'top',
        html : 'true',
        content : '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p class="small">- Anna Kristensen, kampanjen <a href="#">Varför apor aldrig bär rosa klänning</a></p>',
        trigger : 'click'
    });
    $('#recohanjun').popover({
        placement : 'top',
        html : 'true',
        content : '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p class="small">- Anna Kristensen, kampanjen <a href="#">Varför apor aldrig bär rosa klänning</a></p>',
        trigger : 'click'
    });
});

Answer 1

这不是解决此问题的最佳方法，但它可以帮助您入门：

请注意，我缩短了代码，使其更具可读性。

$(document).ready(function () {
    var popovers = [];
    //popover homepage
    popovers.push(createPopOver('#recorobert'));
    popovers.push(createPopOver('#recoanna'));
    popovers.push(createPopOver('#recochristian'));
    popovers.push(createPopOver('#recohanjun'));

    popovers[0].popover('show');

    var anim = function (idx) {  // Create the recursive function
        setTimeout(function () { // Use setTimeout to delay execution each time
            // Hide the Popover
            popovers[idx].popover('hide'); 
            // Move pointer to next in the array.
            idx++; 
            // If the pointer is still within the bounds
            if (idx < popovers.length) {    
                // Show the next one in the array
                popovers[idx].popover('show'); 
                // Run it for the next Popover
                anim(idx); 
            }
        }, 5000);
    };
    anim(0);
});

function createPopOver(selector) {
    return $(selector).popover({
        placement: 'right',
        html: 'true',
        content: '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p class="small">- Robert Bäckström, kampanjen <a href="#">Movember är här</a></p>',
        trigger: 'manual'
    });
}

<强> I created a JSFiddle for it. It works just fine.

animate bootstrap popovers with jquery

1 个答案: