1

ここでフェードインとフェードアウトはどのように正確に達成されますか？サイトも「ぎこちない」と感じています。

フェードは出口と入口で発生します。スムーズに行われます。

このソリューションに似ていますか？

フェードインは、私が間違っていなければ、css3アニメーションで行うことができます。light jsを使用して、終了時にホールドとフェードアウトのcssアニメーションをトリガーできますか？

更新：ちょうどこれに出くわしました。素晴らしいようです。何かご意見は？最初のリンクで使用されたソリューションとどのように比較されますか？

ありがとう！

4

1 に答える 1

1

jQuery でこれを行う方法の簡単な例を見てみましょう。

以下は、ajax を使用してフェードインとフェードアウトを実行する方法のサンプル 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>

上記の例で私が行っているのは、それぞれに3 つのタグを持つhtmlhasdivを使用してサンプルを作成することです。id menulilink

今、私はjQuery click eventそれらのリンクに割り当てられたものを作成し、それらの属性を取得し、 を使用hrefしてそれにリクエストを送信します。hrefjQuery.ajax

応答が成功すると、作成された divhtml内のすべての結果がロードされますcontainerhtml.

さらにアニメーションを追加することもできますが、理解できるようにシンプルにしています。

于 2013-02-22T06:18:15.733 に答える