Question

如何完全实现淡出和淡出here？感觉网站也是'ajaxed'。

退出和进入时会出现淡出现象。顺利完成。

类似于this解决方案？

如果我没有弄错的话，可以用css3动画完成淡入淡出。可以点亮js用于在退出时触发保持和淡出css动画吗？

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

谢谢！

Answer 1

让我们举一个简单的例子，说明如何使用jQuery。

以下是如何使用ajax执行fadeIn和fadeOut的示例html和jQuery代码。

<!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示例div，其中id menu有li个标记，每个link标记jQuery click event。< / p>

现在我已为这些链接创建了分配href并获取了href属性，并使用jQuery.ajax向html发送了请求。

现在，成功回复，它会在container

中创建的html. div中加载所有结果{{1}}

你已经完成了，你也可以添加更多的动画，但我保持简单易懂。

淡入淡出页面

1 个答案: