Question

我网站的一个页面有一个新闻Feed，我使用AJAX每次返回一个并显示它。我希望每天的新闻能够淡出。

问题是重复的消退，对于我返回的每一天

HTML

<div id='newsdiv' class='newsDiv'></div>

Javascript AJAX调用

document.getElementById('newsdiv').innerHTML += xmlhttp.responseText;

CSS

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Opera < 12.1 */ 
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.divFadeIn, .centreScreen, .tbl_houseForm {
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;

    -webkit-animation-iteration-count: 1;
       -moz-animation-iteration-count: 1;
        -ms-animation-iteration-count: 1;
         -o-animation-iteration-count: 1;
            animation-iteration-count: 1;

-webkit-animation-fill-mode: forwards;
   -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
     -o-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
 }

如果我将淡入淡出添加到新Feed中，那么它会在返回第一天时淡入，但在接下来的任何一天都不会淡入。

如果我将淡入淡出放在子div上，那么当每天返回时它会淡入（即在第二天返回时重复淡入淡出）。

如何阻止这种情况发生？如何阻止每一天不止一次褪色？

我明白每一天都只是渐渐消失，因为div＆＃34; divNews＆＃34;正在重新填充。但这种理解并没有解决我的问题。

Answer 1

您应该在父div中添加一个新元素，而不是更新整个内容。

您可以使用ajax调用返回json，并使用回调函数上返回的数据动态创建新元素。

使用jquery的简单示例：

$.get('your_url',function(data){

  var el = $('<div></div>').addClass('animation_class').html(data.key);
  $('#newsdiv').append(el);

});

Answer 2

我自己解决了。

我确保淡入是由一个没有做任何其他事情的div完成的，然后在我添加以下几天的新闻之前，我从div中删除了类名。

var sTempNewsFeed = document.getElementById('newsdiv').innerHTML;

sTempNewsFeed = sTempNewsFeed.replace('class=\'divFadeIn\'', '');
sTempNewsFeed = sTempNewsFeed.replace('class=\"divFadeIn\"', '');
sTempNewsFeed += xmlhttp.responseText;
document.getElementById('newsdiv').innerHTML = sTempNewsFeed;

在新闻提要上重复fadein

2 个答案: