4

因此，在 AJAX 长轮询的最后一部分中，我试图将输出数据放入 div 中并向下滑动，但它只会向下滑动一次！它每次都会附加div，但无论我做什么，它只会添加到动画一次。我一直在努力让这个工作好几天了，请帮忙。

这是我的全部代码。

//JavaID
var var_IDdatacheck  = <?php echo $javaid; ?>;
var var_IDcheck = parseInt(var_IDdatacheck);

//datacheck
var var_numdatacheck  = <?php echo $datacheck; ?>;
var var_numcheck = parseInt(var_numdatacheck);
function activitycheck() {
    $.ajax({
        type: 'POST',
        url: 'feedupdate.php',
        data: {function: '3test', datacheck: var_numcheck, javaid: var_IDcheck},
        success: function (check) {
            console.log(check);
            var verify = JSON.parse(check);

            if (var_IDcheck < verify['id']) {
                var_IDcheck = verify['id'];
                for (var i=0;i<var_IDcheck;i++){
                    $('#datacheck').prepend(verify[i]).slideDown('slow');
                }
            }
        },
        error: function(check) {
            console.log(check);
        }
    });
} 

$(document).ready(function()  {
    setInterval('activitycheck()',5000);
}); // document ready
4

3 回答 3

0

也许另一种方法是有序的：

<div id="parent_box">
    <div></div>
</div>

<style type="text/css">
   div#parent_box {
       height: 0;
       overflow: hidden;
       transition: height 1s;
   }
</style>

<script type="text/javascript">
function slide_down(html) {
    $('div#parent_box > div').append(html);
    $('div#parent_box').css('height', $('div#parent_box > div').height());
}
</script>

如果我没记错的话，调用slide_down()新.append()数据，并强制父元素与子元素具有相同的高度。transtion会对此进行动画处理，并overflow确保它在动画期间不会“泄漏”。

你不应该能够.slideDown()看到一个可见的元素。如果您将数据附加到它，它只会在没有动画的情况下增加大小。

于 2013-08-20T12:30:05.107 回答
0

扩展您的时间间隔并使其成为一个函数，以便您可以执行您希望调用的两个任务。

setInterval( function() { 
  if ( $('#datacheck').is(":visible") ) { $('#datacheck').slideUp('slow'); }
  activitycheck();
}, 5000 );

当您调用间隔来调用activitycheck() 时，它还将检查#datacheck 当前是否可见，如果是，它将调用上滑转换来隐藏它。

更新：

我可能误解了你的意图。如果您希望每个新 id 在收到时下拉，那么您必须提供对 #datacheck 中包含的 id 的引用。您可以动态地执行此操作，而无需更改数据，方法是为每个 id 提供一个包装器，然后 jquery 可以引用该包装器。所以你的例子可以像这样改变......

if ( var_IDcheck < verify['id']) {
  var_IDcheck = verify['id'];
  for ( var i = 0; i < var_IDcheck; i++ ){
    var id_wrapper = '<div id="' + var_IDcheck + '" style="display:none;">' + var_IDcheck + '</div>';
    $('#datacheck').prepend(id_wrapper);
    $('#' + var_IDcheck).delay(300).slideDown('slow');
  }
}

延迟只是在滑下之前给 prepend 一点时间来完成。此外，使用包装器 div id 的 IDcheck 值可确保您不会意外生成任何相同的 div id。

于 2013-08-20T13:04:39.197 回答
0

您可能需要链接您的幻灯片动画调用。试试下面的代码。一旦前一个动画完成，它就会递归地使用新元素调用动画方法。

if (var_IDcheck < verify['id']) {
    var_IDcheck = verify['id'];
    slideDown(0);
}

function slideDown(i){
    $('#datacheck').prepend(verify[i]).slideDown(function(){
        if(i<var_IDcheck){
            slideDown(i++)
        }
    });
}
于 2013-08-20T12:31:42.897 回答