Javascript ajax调用前的动画效果_Javascript_Jquery_Ajax_Animation

Javascript ajax调用前的动画效果

javascript jquery ajax animation

Javascript ajax调用前的动画效果,javascript,jquery,ajax,animation,Javascript,Jquery,Ajax,Animation,我已经看了几篇关于如何在不刷新浏览器的情况下加载内容的教程。我还使用history pushState和popstate根据显示的站点动态更新url。但是，即使这段代码有效，我也希望能够制作som页面转换动画效果调用Ajax函数，然后制作一些fadeIn动画效果。到目前为止，我还没有成功尝试这么做。我试图阅读Ajax（beforeSend:function（）{}），但success函数似乎在（beforeSend）函数之前执行。有没有人能给我指出正确的方向，或者告诉我我可能做错了什么？我很感激

我已经看了几篇关于如何在不刷新浏览器的情况下加载内容的教程。我还使用history pushState和popstate根据显示的站点动态更新url。但是，即使这段代码有效，我也希望能够

制作som页面转换动画效果

调用Ajax函数

，然后制作一些fadeIn动画效果

。到目前为止，我还没有成功尝试这么做。我试图阅读Ajax（beforeSend:function（）{}），但success函数似乎在（beforeSend）函数之前执行。有没有人能给我指出正确的方向，或者告诉我我可能做错了什么？我很感激

   $(document).ready(function() {

        var content, fetchAndInsert;

        content = $('div#content');

        // Fetches and inserts content into the container
        fetchAndInsert = function(href) {
            $.ajax({
                url: 'http://localhost:8000/phpexample/content/' + href.split('/').pop(),
                method: 'GET',
                cache: false,
                success: function(data) {
                    content.html(data);
                }
            });
        };

        // User goes back/forward
        $(window).on('popstate', function() {
            fetchAndInsert(location.pathname);
        }); 

        $('.buttonlink').click(function(){
            var href =  $(this).attr('href');

            // Manipulate history
            history.pushState(null, null, href);

            // Fetch and insert content
            fetchAndInsert(href);

            return false;
        });
});

有问题吗？问吧

事先谢谢

///E

试试这个：

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

试试这个：

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

我的解决方案：

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

我的解决方案：

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

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

您可以等待动画完成，然后使用

.queue（）

，

.promise（）

，

.finish（）

将新内容添加到

html

var元素=$（“#加载”）.hide（）；
var容器=$（“#内容”）；
变量按钮=$（“按钮”）；
var ajax={
//做异步的事情
请求：函数（）{
返回新的延迟美元（函数（d）{
setTimeout（函数（）{
d、 解决（“完成”）
}，Math.random（）*5000）
})
},
beforeSend:function（）{
element.fadeIn（）.queue（函数（）{
$（此）。设置动画({
字体大小：100
}, {
持续时间：2500
}).dequeue（）
});
},
成功：功能（内容）{
element.finish（）.promise（“fx”）.then（function（））{
元素。淡出（“慢”，函数（）{
$（this.css（“fontSize”、“inherit”）；
container.append（content+“
”）.fadeIn（“slow”）；
按钮。removeAttr（“禁用”）
})
})
}
}
按钮。单击（函数（）{
$（此）.attr（“已禁用”、“已禁用”）；
$.when（ajax.beforeSend（））。然后（ajax.request）。然后（ajax.success）
})


加载。。。
加载内容

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

您可以等待动画完成，然后使用

.queue（）

，

.promise（）

，

.finish（）

将新内容添加到

html

var元素=$（“#加载”）.hide（）；
var容器=$（“#内容”）；
变量按钮=$（“按钮”）；
var ajax={
//做异步的事情
请求：函数（）{
返回新的延迟美元（函数（d）{
setTimeout（函数（）{
d、 解决（“完成”）
}，Math.random（）*5000）
})
},
beforeSend:function（）{
element.fadeIn（）.queue（函数（）{
$（此）。设置动画({
字体大小：100
}, {
持续时间：2500
}).dequeue（）
});
},
成功：功能（内容）{
element.finish（）.promise（“fx”）.then（function（））{
元素。淡出（“慢”，函数（）{
$（this.css（“fontSize”、“inherit”）；
container.append（content+“
”）.fadeIn（“slow”）；
按钮。removeAttr（“禁用”）
})
})
}
}
按钮。单击（函数（）{
$（此）.attr（“已禁用”、“已禁用”）；
$.when（ajax.beforeSend（））。然后（ajax.request）。然后（ajax.success）
})


加载。。。
加载内容

您需要使用回调。提供的解决方案将起作用，但不一定是按顺序提供的

$.animate（）

和

$.ajax

都是异步运行的。如果不熟悉这个术语，这里有一个很好的介绍：

以下是我可能会做的：

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

这将淡出

内容中当前的内容，获取新数据，替换内容中当前的内容，然后淡入。
您需要使用回调。提供的解决方案将起作用，但不一定是按顺序提供的$.animate（）
和$.ajax
都是异步运行的。如果不熟悉这个术语，这里有一个很好的介绍：
以下是我可能会做的：
   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);
               }
           });
       });
    };

这将淡出内容中当前的内容，获取新数据，替换内容中当前的内容，然后淡入。
我可能会为此尝试使用一些css
#content { 
   opacity: 0;
   transition: all 1s;
}

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


我可能会为此尝试使用一些css
#content { 
   opacity: 0;
   transition: all 1s;
}

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


谢谢你，我相信我可以用这个@谢谢你，我相信我可以用这个@德鲁