0

我有一个图像滑块，我需要淡出以便在悬停时显示许多新内容块之一。不幸的是，在显示新内容之前，我无法完成淡出。谁能看到我做错了什么？

<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 的外观，但我更改了 id 名称并遗漏了您需要将额外/特殊幻灯片移动到包含需要激活它们的链接的容器中的无关内容。
  • 我使用了较小的尺寸，并且没有在最终设计中使用任何精细的细节来仅显示您需要的相关 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

试一试。要实现鼠标移出，您需要提供第二个函数来悬停。您还需要确保停止当前动画，以防它已经在进行相反的淡入淡出：

<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". 我猜你已经把它作为你的样式表的一部分。我也在使用谷歌的 JQuery，所以可能需要删除/调整。

于 2012-03-16T19:37:47.867 回答