Get jquery in a slidedown div more than once without updating

Question

So, in the last part of a long AJAX poll, I try to get the output that needs to be placed in a div and pushed down, but it will only slide once! It will add a div every time, but no matter what I do, it will only be animated once. I tried to get this to work for several days, please help.

Here is all my code.

//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

Maybe a different order would be in order:

 <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> 

If I'm not mistaken, calling slide_down() will result in .append() new data and force the parent to have the same height as the child. transtion will animate this, and overflow make sure that it does not "leak out" during the animation.

You cannot .slideDown() see the visible element. If you add data to it, it will simply increase in size without animation.

Answer 2

You probably need to link the slide animation calls. Try the following code. It recursively calls the animation method with the new element after the animation for the previous one is completed.

 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

Expand your interval and make it a function so that you can perform both tasks that you want to call.

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

When you call your interval to call the activitycheck () function, it also checks if #datacheck is currently displayed, and if it will trigger a slideshow to hide it.

UPDATE:

Perhaps I misunderstood your intention. If you want each new identifier to be unloaded as it arrives, you will need to provide links to the identifiers contained in #datacheck. You can do this dynamically without changing your data, providing a wrapper for each identifier that jQuery can reference. So your example could be changed like this ...

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

The delay just gives a little time for the prefix to complete before it crawls down. Also, using the IDcheck value to wrap a div id ensures that you do not accidentally generate the same div identifiers.