Question

当我想要更改元素的内容时，它可以在没有效果的情况下正常工作，并使用效果执行此行为：

将内容更改为新内容
对新内容进行隐藏效果
显示效果，仍在新内容上

以下是我每次需要更改内容时启动的代码：

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

这是sammy，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');
    });
  });

现在一旦淡出效果结束，它将执行数据切换并淡入！[/ p>

安德鲁

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

  });
}

如何在隐藏元素之前阻止jQuery加载修改后的内容？

2 个答案: