使用Jquery淡出进行页面过渡 [英] Using Jquery fadeout for page transition

问题描述

您好，谢谢您提供任何解决方案.我一直在尝试在用户切换页面时添加淡入和淡出功能.我尝试了在这里和其他论坛上找到的许多解决方案，但似乎都无法解决.淡入效果很好，我只需要在body标签上添加.ghostly即可.我所做的一切都对淡出没有作用.任何帮助将不胜感激，因为我是编码的新手.

Hello and thank you in advance for any solutions. I've been trying to add a fade in and fade out function when users are switching through pages. I have tried many solutions found here and on other forums but none of it seems to work for the fade out. The fade in works just fine I just had to add .ghostly to the body tag. Nothing I have done has worked for the fadeout. Any help would be greatly appreciated as I'm fairly new to coding.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
    .ghostly {
        opacity: 0;
    }
</style>
<script>
    $(document).ready(function() {
        $('.ghostly').animate({
            opacity: '1'
        }, 3000);
    });
    $("a").click(function(event) {
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, redirectPage(linkLocation));
    });

    function redirectPage(link) {
        document.location.href = link;
    }
</script>

推荐答案

1.淡入淡出立即触发！

单击锚点时，下一页将开始加载，当前页上的所有代码将停止.您通过不等待fadeOut完成而错误地解决了这种情况！您需要将该调用包装在一个匿名函数中，

1. Fadeout firing immediately!

When you click the anchor, the next page will start loading and any code on the current page will cease. You have incorrectly covered that situation by not waiting for the fadeOut to finish! You need to wrap that call in an anonymous function,

例如

$("body").fadeOut(1000, function(){redirectPage(linkLocation)});

否则，您只需立即调用redirectPage 并将其返回值传递给fadeOut方法！

otherwise you are simply calling redirectPage immediately and passing its return value to the fadeOut method!

选项:另一种转换方法是使用Ajax加载所有页面.然后，您可以应用所需的任何效果(可以在锚点单击事件处理程序中进行常规处理).这要求您在页面更改时更新浏览器历史记录，但是非常有效(您可以通过任何方式转换页面).

Option: An alternative transition method, is to use Ajax for loading of all pages. Then you can apply any effect you want (you can do that generically in your anchor click event handler). This requires you update the browser history as the pages change, but is very effective (you can transition pages by any means then).

您可以执行以下操作来替换整个页面:

You can do something like this to replace the entire page:

jQuery(function ($) {
    $('.ghostly').animate({
        opacity: '1'
    }, 3000);
    $(document).on('click', "a", function (event) {
        event.preventDefault();
        $.when($("body").fadeOut(4000).promise(), $.ajax({
            url: this.href,
            type: 'get',
            dataType: 'html'
        })).done(function (html) {
            var newDoc = document.open("text/html", "replace");
            newDoc.write(html);
            newDoc.close();
            $("body").css({
                display: "none"
            });
            $("body").fadeIn(4000);
        });
    });
});

它使用$.when()组合动画承诺和Ajax调用.两者都完成后，它将处理Ajax页面加载中的数据并替换页面的整个正文.

It uses $.when() to combine the animation promise and the Ajax call. When both complete, it processes the data from the Ajax page load and replaces the entire body of the page.

*注意:由于出现访问控制允许来源"错误，因此不会加载链接中的页面，但在您自己的网站上应该可以正常工作.

任何访问"现有"元素的jQuery代码都需要进入文档准备就绪(也就是说，您假定已加载的元素.在这种情况下，'a' = 所有锚点).

Any jQuery code that accesses "existing" elements needs to go in the document ready (that is elements you assume are already loaded. In this case 'a' = all anchors).

例如

$(document).ready(function() {
    $('.ghostly').animate({
        opacity: '1'
    }, 3000);
    $("a").click(function(event) {
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, redirectPage(linkLocation));
    });
});

您可以将jQuery代码放在body的末尾以获得类似的效果，但是它使可移植的代码较少(尤其是当代码位于单独的.js文件中时...通常/应该这样做).改善缓存).

You can put jQuery code at the end of body to get a similar effect, but it makes for less portable code (especially when the code is in separate .js files... which it often will/should be to improve caching).

如果您使用延迟事件处理程序，则可以执行以下操作:

If you use deferred event handler you can do this instead:

<script>
    $(document).ready(function() {
        $('.ghostly').animate({
            opacity: '1'
        }, 3000);
    });

    // Catch all anchor clicks bubbled to the document...
    $(document).on('click', "a", function(event) {
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, redirectPage(linkLocation));
    });

    function redirectPage(link) {
        document.location.href = link;
    }
</script>

延迟事件处理程序通过侦听未更改的祖先元素(例如，在本例中为文档，因为它已经存在)中的事件来工作，然后使用jQuery选择器来匹配元素， then 调用导致事件的所有匹配元素 的函数.

Deferred event handlers work by listening for events at an ancestor element that does not change (e.g. document in this case, as it is already present), then use the jQuery selector to match elements, then call the function for any matching elements that caused the event.

我也建议您始终使用此快捷方式来准备文档:

I would also recommend you use this shortcut for document ready anyway:

$(function(){
     // Your code here
});

或更好(以避免名称空间与$冲突):

or better yet (to avoid namespace clashes with $):

jQuery(function($){
     // Your code using the local $ here
});

第二个版本是最好的版本，因为此文档已准备好传递对jQuery的引用作为第一个参数. 注意:尽管看起来很相似，但它不是IIFE(立即调用的函数表达式)，您有时会看到它包装了jQuery代码..

This second version is the best catch-all as this document ready passing a reference to jQuery as the first parameter. Note: Although it looks similar this is not an IIFE (immediately invoked function expression) that you sometimes see wrapping jQuery code.

将所有内容放在一起，您会得到:

Put that all together and you get this:

jQuery(function($) {
    $('.ghostly').animate({
        opacity: '1'
    }, 3000);
    $(document).on('click', "a", function(event) {
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, function(){redirectPage(linkLocation)});
    });
});

这篇关于使用Jquery淡出进行页面过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！