1

淡入淡出是如何在这里实现的？感觉网站也被“ajaxed”了。

褪色发生在出口和入口处。顺利完成。

类似于这个解决方案？

如果我没记错的话，可以使用 css3 动画来完成淡入。可以使用 light js 在退出时触发保持和淡出 css 动画吗？

更新：刚刚遇到这个。看起来很棒。有什么想法吗？它与第一个链接中使用的解决方案相比如何？

谢谢！

4

1 回答 1

1

让我们举一个简单的例子，你可以如何使用 jQuery 做到这一点。

下面是示例 html 和 jQuery 代码，用于说明如何使用 ajax 进行淡入和淡出。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Title</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">

        $(function()
        {
            $("div#menu ul li a").click(function(e)
            {
                var href = $(this).attr('href');
                e.preventDefault();
                $.ajax({
                    url : href,
                    dataType : 'html',
                    type    : 'get',
                    beforeSend : function()
                    {
                        //code before send request
                    },
                    success : function(htmlResponse)
                    {
                        $('#container').empty().html(htmlResponse).fadeIn('slow');
                    }
                });

            });
        });

    </script>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="about.html">about</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>

    <div id="container"></div>

</body>
</html>

我在上面的示例中所做的是创建具有html三个标签的示例，每个标签都有。divid menulilink

现在我创建了分配jQuery click event给这些链接并获取它们的href属性并href使用jQuery.ajax.

现在在成功响应时，它将html在containerdiv 中加载所有结果，该结果创建于html.

你已经完成了，你还可以向它添加更多动画，但我保持简单以便于理解。

于 2013-02-22T06:18:15.733 回答