Как я могу предотвратить загрузку измененного содержимого в jQuery, прежде чем скрывать элемент?

Question

Когда я хочу изменить содержимое элемента, он работает нормально без эффектов, и это поведение с эффектами:

2. меняет содержимое на новое
3. делает эффект сокрытия, на новом контенте
4. делает эффект показа, все еще на новом контенте

Вот код, который запускается каждый раз, когда мне нужно изменить содержимое:

function changePage(slug) {
  var content = $('#content');
  var title   = $('#name');
  $.getJSON('http://'+location.host+'/'+slug+'.json', function(data) {
    $('#main').fadeOut('slow');
    title.html(data.name);
    content.html(data.content);
    $('#main').fadeIn('slow');
  });
}

Вот код, который запускает эту функцию:

var app = new Sammy.Application(function() {with(this){
  get('#/', function() { with(this) {
    changePage('_home');
  }});
  get('#/:page', function() { with(this) {
    changePage(params['page']);
  }});
}});
$(function(){app.run();});

Это Сэмми, http://github.com/quirkey/sammy/.

Заранее спасибо за помощь!

Answer 1

Функции fadeOut и fadeIn имеют полный обработчик, который вам нужно использовать, например:

$.getJSON('http://'+location.host+'/'+slug+'.json', function(data) {
    $('#main').fadeOut('slow',function(){
    title.html(data.name);
    content.html(data.content);
    $('#main').fadeIn('slow');
    });
  });

Теперь, когда эффект затухания закончится, он выполнит переключение данных и вернется обратно!

Andrew

Answer 2

fadeIn и fadeOut вызывают асинхронную анимацию, поэтому Javascript продолжает выполнять дальнейшие операторы, пока происходят эти эффекты. Таким образом, он начинает постепенно исчезать из элемента, и только после его запуска вы меняете содержимое, а затем вызываете постепенное исчезновение, в котором, как мне кажется, он добавляется в цепочку эффектов.

fadeOut позволяет передавать функцию обратного вызова, которая срабатывает после завершения анимации. Так что вы можете сделать это:

function changePage(slug) {
  var content = $('#content');
  var title   = $('#name');
  $.getJSON('http://'+location.host+'/'+slug+'.json', function(data) {
    $('#main').fadeOut('slow', function() {
        title.html(data.name);
        content.html(data.content);
        $('#main').fadeIn('slow');
    });

  });
}