2016-05-16 1 views
0

Ich benutze Ajax, um ein neues Formular zu laden, sobald das alte Formular eingereicht wurde. der Code sieht aus wie folgt:Wie animiere Elemente geladen werden mit jQuery laden Methode

$(document).on('click', '.next', function() { 
     if ($(this).hasClass('disabled')) { 
      return false; 
     } 
     var toLoad = $(this).attr('href') + '#content'; 

     $('#main-container #content').transition({ 'x' : '-100%' , duration:700 } , function() { 
      loadContent();  
     }); 
     // $('#main-container').animate({ 'opacity': 1 }, loadContent); 
     window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 5); 

     function loadContent() { 
      $('#main-container').load(toLoad, '', showNewContent()) 
     } 

     function showNewContent() { 
      $('#main-container').show('normal'); 
     } 
     return false; 
    }); 

    /* enable next button */ 

    $(document).on('change', '[type="radio"]', function() { 
     var checked_no = $('[type="radio"]:checked').length; 
     if (checked_no > 0) { 
      $('.btn-next').removeClass('disabled'); 
     } 
    }); 

DEMO HERE

Nun würde Ich mag eine Übergangsanimation haben, wenn das erste Formular abgeschickt wird es nach links und von rechts gleitet die neue Folie kommt in , genau wie in einem normalen Schieberegler.

Wenn das 1. Formular eingereicht wird, habe ich eine Animation für das Verschieben nach links bekommen und es genau was ich will, ich benutzte ein Plugin transit.js und benutzte einfach die folgenden Codezeilen, um den Übergang zu erreichen:

$('#main-container #content').transition({ 'x' : '-100%' , duration:700 } , function() { 
      loadContent();  
     }); 

aber jetzt, wie ich den Inhalt übersetze, der geladen wird? ab sofort lädt es nur mit der load - Funktion und das ist ziemlich lahm, ich verstehe, dass der Schwierigkeitsgrad, um diese nächste Animation zu tun etwas höher ist und ich bin nicht in der Lage, eine Möglichkeit zu finden, diesen Inhalt mit einer Animation zu laden das gleitet von rechts).

Wie genau animiere ich Inhalte, die mit der Methode load jQuery und transit.js geladen werden?

Antwort

0

Hier ist mein Vorschlag in 4 Schritten:

  1. Slide $ ('# main-Container') nach links
  2. sofort $ ('# main-Container')
  3. auf der rechten Seite neu positionieren Legen Sie den neuen Inhalt in $ ('# main-Container')
  4. Slide $ ('# main-Container')

Der Code wie diese

sieht 012 zum Zentrum
$('#main-container').transition({ 'x' : '-100%' , duration:700 } , function() { 
    $('#main-container').css('x','100%'); 
    loadContent(); 
}); 

function loadContent() { 
    $('#main-container').load(toLoad, '', showNewContent()) 
} 

function showNewContent() { 
    $('#main-container').show('normal'); 
    $('#main-container').transition({ 'x' : '0' , duration:700 }); 
}