Question

对此进行fadeIn()和fadeOut()的正确方法是什么？它只是眨眼。

这是我的代码：

HTML

<blockquote id="reviews">
     <p id="review_content"></p>
     <footer><a href="#" id="review_url"></a></footer>
 </blockquote>

jquery的

var reviews = [{
    content: "To err is human; to forgive, divine.",
    user: "Alexander Pope",
    url: "http://www.example.com"
}, {
    content: "Reports of my death have been greatly exaggerated.",
    user: "Mark Twain",
    url: "http://www.example.com"
}, {
    content: "A line of oversize watches that can offer many of the attributes of premium luxury watches at an affordable price.",
    user: "Horozima",
    url: "http://www.horozima.com/2012/07/terranaut-xl-50mm.html"
}];

var interval = 4000; // 4sec interval

(function change() {

    var randomReview = Math.floor(Math.random() * reviews.length)

    var reviewContent = $('#review_content', '#reviews').text(reviews[randomReview].content);
    var reviewUser = $('footer a#review_url', '#reviews').attr('href', reviews[randomReview].url).text(reviews[randomReview].user);

    function updateText() {
        reviewContent.fadeIn();
        reviewUser.fadeIn();
    }

    function dismisText() {
        reviewContent.fadeOut();
        reviewUser.fadeOut();
    }

    updateText();
    dismisText();

    setTimeout(change, interval);
})();

Answer 1

闪烁行为是因为jQuery动画总是并行运行（除非您不希望它们如此）。

您可以使用fadeIn / fadeOut函数的回调功能来展示对动画的链式效果：

reviewContent.fadeOut(function(){ // callback
    reviewUser.fadeOut();
});

您还可以通过fadeIn链接fadeOut和.promise()（从方法中返回承诺），因为它们表现出Promise行为：

reviewContent.fadeOut()
    .promise()
    .done(function(){
       reviewUser.fadeOut();
    });

Demo

实时blockquote动画

1 个答案: