Question

因此，在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

Answer 1

也许另一个apporach将是有序的：

<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()一个可见元素。如果你向它追加数据，它只会增加尺寸而不需要动画。

Answer 2

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

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++)
        }
    });
}

Answer 3

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

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');
  }
}

在向下滑动之前，延迟只需要一点时间来完成前置。此外，使用包装div ID的IDcheck值可确保您不会意外生成任何相同的div ID。

不经刷新就让Jquery不止一次得到slideown div

3 个答案: