Question

我的页面上有一个简单的动画，它循环显示引号（目前来自javascript数组）。在加载新引号之前，jQuery将div向右移动一点并隐藏它。然后它加载新文本并将div移回到左边，同时将其淡入。

这是

的JavaScript：

var lastIndex;

$(document).ready(function () {
    cycleTestimonial(); // set first testimonial
    setInterval(cycleTestimonial, 9000);    // cycle through testimonials every x seconds after that
});

function cycleTestimonial() {
    var testi = getTestimonial();   // retrieve testimonial
    if (!testi) return; // usually means duplicate of last quote, so skip setting HTML
    $('#testimonial').hide(0, function () { // erase current quote
        $('#testimonial > #quote').html(testi['quote'].replace(/'/g, "&rsquo;"));
        $('#testimonial > #author').html(testi['auth']);
        $('#testimonial > #tagline').html(testi['tag']);
        $(this).velocity({   // set opacity to 0 and move right instantaneously to prepare to fade new quote in
            right: '-=60',
            opacity: 0.0
        }, 0, function () {
            var testiH = $(this).height();
            var headH = $('#home-header').height() / 2;
            $(this).offset({ 'top': (headH-(testiH/2)) });
            $(this).show().velocity({    // fade in new quote and slide left
                right: '+=60',
                opacity: 1.0
            }, 600);
        });
    }); 
}

function getTestimonial(index) {
    var t = [   {   "quote" : "I love this product.",
                    "auth"  : "John Doe",
                    "tag"   : "Preferred Client"
                },
                ...
            ];

    if (!index) {   // no specific testimonial asked for, get a random one
        index = Math.floor(Math.random() * t.length);
        if (index == lastIndex) {   // retrieved same testimonial as last time
            cycleTestimonial(); // re-run until we get a new testimonial from last time
            return;
        }
        else lastIndex = index; // set to ensure no repeats back-to-back
    }
    return t[index];
}

为了彻底，这里是相应的

HTML：

<div id="home-header">
    <div class="boundary">
        <div id="testimonial">
            <div id="quote">
                quote
            </div>
            <div id="author">
                author
            </div>
            <div id="tagline">
                tagline
            </div>
        </div>
    </div>
</div>

最后，相关

CSS：

.boundary {
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 1080px;
    min-width: 720px;
    height: inherit;
}

#home-header {
    display: block;
    position: relative;
    height: 420px;
    width: inherit;
}

#home-header #testimonial {
    position: absolute;
    display: block;
    top: 40px;
    right: 0px;
    min-width: 350px;
    max-width: 470px;
}

#home-header #testimonial #quote {
    display: block;
    width: inherit;
    text-align: left;
    font-size: 26pt;
    font-style: italic;
    line-height: 1.2;
    color: #0085df;
    font-weight: 300;
}

#home-header #testimonial #author {
    display: block;
    width: inherit;
    text-align: right;
    font-size: 14pt;
    font-weight: 700;
    color: #999;
}

#home-header #testimonial #tagline {
    display: block;
    width: inherit;
    text-align: right;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 8pt;
    color: #999;
}

现在，这段代码大部分时间都很有用。但是，当我从页面切换到另一个标签页或窗口，然后回到它时，对齐就会变得棘手，直到加载新的报价。

此外，当我加载页面时，偶尔也会调整对齐方式，就像它在页面完全加载或加载到足以让它正确放置之前放置一样。

有没有更好的方法来做我正在做的事情，这些问题不会出现在这些问题上？

切换标签时jQuery动画搞砸了

的JavaScript：

HTML：

CSS：

0 个答案: