Question

我已经观看了几个关于如何加载内容而无需刷新浏览器的教程。我还使用历史pushState和popstate动态更新url，具体取决于显示的站点。但是，即使此代码有效，我希望能够main = putStrLn $mul 7 "Hi" mul :: Int -> String -> String mul 0 _ = "" mul 1 s = s mul _ "" = "" mul n s = let (q, r) = n `quotRem` 2 s' = mul q s in (if r == 1 then s else "") ++ s' ++ s'＆gt; make som page transition animation effects＆gt; call the Ajax function。到目前为止，我没有运气试图这样做。我试着阅读Ajax（beforeSend：function（）{}），但是成功函数似乎在（beforeSend）函数之前执行。有没有人可以指出我正确的方向，或告诉我我可能做错了什么？我赞不绝口了！

then make some fadeIn animation effects

有问题吗？请问！

事先谢谢！

/// E！

Answer 1

我试着阅读Ajax（beforeSend：function（）{}），但成功了函数似乎在（beforeSend）函数之前执行

您可以等待动画完成，然后使用html，.queue()，.promise()

向.finish()添加新内容

beforeSend: function() {
  element.queue(function() {
   $(this).animate({/* do animation stuff */:500}, {duration:5000}).dequeue()
  });
},
success: function(content) {
  element.finish().promise("fx").then(function() {
    container.append(content).fadeIn()
  })
}

var element = $("#loading").hide();
var container = $("#content");
var button = $("button");
var ajax = {
  // do asynchronous stuff
  request: function() {
    return new $.Deferred(function(d) {
      setTimeout(function() {
        d.resolve("complete")
      }, Math.random() * 5000)
    })
  },
  beforeSend: function() {
    element.fadeIn().queue(function() {
      $(this).animate({
        fontSize: 100
      }, {
        duration: 2500
      }).dequeue()
    });
  },
  success: function(content) {
    element.finish().promise("fx").then(function() {
      element.fadeOut("slow", function() {
        $(this).css("fontSize", "inherit");
        container.append(content + "<br>").fadeIn("slow");
        button.removeAttr("disabled")
      })
    })
  }
}

button.click(function() {
  $(this).attr("disabled", "disabled");
  $.when(ajax.beforeSend()).then(ajax.request).then(ajax.success)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">    
</script>
<div id="loading">loading...</div>
<div id="content"></div>
<button>load content</button>

jsfiddle https://jsfiddle.net/ajmL5g1a/

Answer 2

试试这个：

fetchAndInsert = function(href) {
            // Before send ajax. Do some effects here
            $.ajax({
                url: 'http://localhost:8000/phpexample/content/' + href.split('/').pop(),
                method: 'GET',
                cache: false,
                success: function(data) {
                    // After loading. Do some effects here
                    content.html(data);
                }
            });
        };

Answer 3

我的解决方案：

    fetchAndInsert = function(href) {
        var timeBeforeAnimation = Date.now(), animationDuration = 500;

        /* Do some animation, I assume that with jQuery,
           so you probably know how much time is takes - store that
           time in variable `animationDuration`. */

        /* Run your "before" animation here. */

        $.ajax({ ...,
            success: function(data) {
                /* Check, if request processing was longer than
                   animation time... */

                var timeoutDuration = animationDuration -
                                      (Date.now() - timeBeforeAnimation);

                /* ...and if so, delay refreshing the content,
                   and perform the final animation. */

                setTimeout(function() {
                    content.html(data);
                    /* Perfom final animation. */
                }, Math.max(0, timeoutDuration);
            }
        });
    };

Answer 4

您需要使用回调。提供的解决方案将起作用，但不一定是顺序的。 $.animate()和$.ajax都是异步运行的。如果不熟悉这个术语，这里有一个很好的介绍：http://code.tutsplus.com/tutorials/event-based-programming-what-async-has-over-sync--net-30027

这是我可能会做的事情：

   fetchAndInsert = function(href) {
       $('#some-element').animate({'opacity':'0.0'}, 1000, function () {
           $.ajax({
               url: 'http://localhost:8000/phpexample/content/' + href.split('/').pop(),
               method: 'GET',
               cache: false,
               success: function(data) {
                   content.html(data);
                   content.animate({'opacity':'1.0'}, 1000);
               }
           });
       });
    };

这将淡出当前content中的所有内容，获取新数据，替换content中当前的内容，然后淡入。

Answer 5

我可能会尝试使用一些css。

#content { 
   opacity: 0;
   transition: all 1s;
}

#content.fade-in { 
   opacity: 1;
}

...

const content = $('#content');
const btn = $('.buttonlink');

const success = data => 
   content.html(data).addClass('fade-in');

const fetchAndInsert = url => 
   $.ajax({ url, cache: 'false' }).done(success);

const getData = function(e) { 
   e.preventDefault();

  content.removeClass('fade-in');
  fetchAndInsert($(this).attr('href'));
};

btn.on('click', getData)

ajax调用前的动画效果

5 个答案: