Comment puis-je fondre dans ma table après avoir chargé son contenu?

Question

$('a.loadTable').live('click', function(event) 
    { 
      $('#myTable').html(""); 

      // loop over elements to load table: 

      $('#myTable').append("<tr><td>" + item.id + "</td><td>" + item.name +"</td></tr>"); 

Ma fonction jQuery - à peu près ce que vous voyez ci-dessus - charge une table pleine d'éléments en utilisant JSON à partir d'éléments de ma base de données. Mais, au lieu de l'avoir sur la page, comment est-ce que je pourrais l'aplanir ou faire un autre effet sympa sur la table plutôt que de simplement l'afficher?

Answer 1

Il y a une fonction .fadeIn() en jQuery juste pour cela.

$('a.loadTable').live('click', function(event) { 
    $('#myTable').html(""); 
    $('#myTable').hide(); 

    // loop over elements to load table: 

    $('#myTable').append("<tr><td>" + item.id + "</td><td>" + item.name +"</td></tr>"); 

    $('#myTable').fadein("slow"); 
} 

Vous pouvez en savoir plus sur les paramètres de .fadeIn(), et les lissages de callbacks jQuery API documentation.

Answer 2

Vous pouvez le faire:

$('a.loadTable').live('click', function(event) { 
        $('#myTable').html(""); 
        $('#myTable').append("<tr><td>" + item.id + "</td><td>" + item.name +"</td></tr>").fadeIn(750); 

assurer juste que vos articles ont display: none (et/ou Opacity 0.0)