0

ホバー時に多くの新しいコンテンツブロックの1つを表示するために、フェードアウトする必要がある画像スライダーがあります。残念ながら、新しいコンテンツが表示される前にフェードアウトして完了するのに問題があります。誰かが私が間違っていることを見ることができますか？

<div class="slider-wrapper slider">
    <!-- Slider Items -->

    <ul class="items">
        <!-- Slider One -->

        <li>
            <div class="banner">
                TEST1
            </div>
        </li><!-- Slider Two -->

        <li>
            <div class="banner">
                TEST2
            </div>
        </li><!-- Slider Three -->

        <li>
            <div class="banner">
                TEST3
            </div>
        </li>
    </ul><!-- /Slider Items -->
</div>

<div id="attract-container">
    <div class="attract-copy" id="attract-slider">
        ATTTRACT CONTENT
    </div>
</div>

<div id="engage-container">
    <div class="attract-copy" id="attract-slider">
        ENGAGE CONTENT
    </div>
</div>

jQuery：

$(document).ready(function() {
    $(".list-services a.tooltips").easyTooltip();
    $("#attract").hover(function() {
        $(".slider-wrapper").fadeOut(2000, function() {
            $("#attract-container").fadeIn(3000, function() {
                $(".slider-wrapper").hide();
            });
        });
        $("#attract-container").fadeOut(2000, function() {
            $(".slider-wrapper").fadeIn(3000, function() {});
        });
    });
});​
4

3 に答える 3

1

あなたが提供したすべての情報から、私はあなたがどういうわけか物事を過度に複雑にしようとしていると結論付けることができます.

デモンストレーションのみを目的としており、あなたが何を望んでいるのかはまだ推測の域を出ないため、達成したいと思う効果を示すためにこれを作成しました。

http://jsfiddle.net/sg3s/Fdcw8/

この例に関するいくつかの注意事項:

  • 私は自由にHTMLを少し改良しましたが、あなたのHTMLがどのように見えるかに固執しました.
  • これに必要な関連する html、css、およびスクリプトのみを表示するために、小さいサイズを使用し、最終的なデザインにある精巧な詳細は使用しませんでした。
  • スライド用に自作したシンプルなスライダーを使用しましたが、これに使用される実際のプラグインは関係ありません。表示目的のためです。

これが望ましい効果であるかどうかをお知らせください。html を使用するために必要な手順の概要を説明します。

注意として; より意味的に正しいかもしれないリストを使用しているようです。私の例では、必要に応じてリストも使用できますが、少し手間がかかります。

于 2012-03-16T20:28:43.987 に答える
0

あなたのコードは、コンテンツのフェードアウトとフェードインの両方を同時に行っています。これがあなたの意図したものかどうかはわかりません。コードを単純化して、.slider-wrapper をフェードアウトし、#attract-container をフェードインするだけにしました。

$(document).ready(function()
{
    $("#attract").hover(function()
    {
        $(".slider-wrapper").fadeOut('fast', function ()
        {
            $("#attract-container").fadeIn('fast');
        });
    });
});
于 2012-03-16T19:29:32.693 に答える
0

これを回してください。マウスアウトを実装するには、ホバーする 2 番目の関数を指定します。また、反対のフェードを実行中の場合に備えて、現在のアニメーションを確実に停止する必要があります。

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
        google.load("jquery", "1.7");

        google.setOnLoadCallback(function ()
        {
            $(document).ready(function () {
                $("#attract").hover(
                    function () {
                        $(".slider-wrapper").stop().show().fadeOut(2000, function () {
                            $(".slider-wrapper").hide();
                            $("#attract-container").stop().fadeIn(3000);
                        })
                    },
                    function () {
                        $("#attract-container").stop().show().fadeOut(2000, function () {
                            $("#attract-container").hide();
                            $(".slider-wrapper").stop().fadeIn(3000);
                        });
                    }
                );
            });
        });
</script> 
</head>
<body>
                <a href="#" id="attract">Hello World</a>

             <div class="slider-wrapper">

                    <div class="slider">
                        <!-- Slider Items -->
                        <ul class="items">
                            <!-- Slider One -->
                            <li>
                                <div class="banner">
                                    TEST1
                                </div>
                            </li>
                            <!-- Slider Two -->
                            <li>
                                <div class="banner">
                                    TEST2
                                </div>
                            </li>
                            <!-- Slider Three -->
                            <li>
                                <div class="banner">
                                    TEST3
                                </div>
                            </li>
                        </ul>
                        <!-- /Slider Items -->



                    </div>                       
                </div>

                <div id="attract-container" style="display:none">
                    <div id="attract-slider">                        
                        <div class="attract-copy">ATTTRACT CONTENT</div>                        
                    </div>
                </div>


                <div id="engage-container">
                    <div id="attract-slider">                        
                        <div class="attract-copy">ENGAGE CONTENT</div>                        
                    </div>
                </div>

</body>
</html>

おそらく削除できますstyle="display:none"。スタイルシートの一部としてすでにそれを持っていると思います。また、Google の JQuery を使用しているため、削除/調整が必要になる場合があります。

于 2012-03-16T19:37:47.867 に答える