Question

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

<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() {});
        });
    });
});

Answer 1

因此，根据您提供的所有信息，我只能得出结论，您试图过度复杂化。

仅用于演示目的，因为它仍然有点猜测你想要的东西我用它来展示我认为你想要实现的效果：

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

关于这个例子的一些注释：

我冒昧地改进了html，但我坚持你的html看起来如何，但我更改了id名称并省略了你需要将额外的/特殊幻灯片移动到需要链接的容器中的不相关的东西激活它们。
我使用较小的尺寸，并且没有在最终设计中精心设计的细节，只显示您需要的相关html，css和脚本。
我使用了一个简单的滑块，我自己制作幻灯片，但实际使用的插件是无关紧要的;用于显示目的。

如果这是理想的效果，请告诉我，我将概述使您的HTML工作所需的步骤。

作为一个说明;我看到你正在使用可能在语义上更正确的列表;我的例子也可以根据需要使用列表，但稍微多一些工作。

Answer 2

您的代码同时淡出和淡出内容。我不确定这是不是你想要的。我将你的代码简化为淡出.slider-wrapper，淡入＃attract-container。

$(document).ready(function()
{
    $("#attract").hover(function()
    {
        $(".slider-wrapper").fadeOut('fast', function ()
        {
            $("#attract-container").fadeIn('fast');
        });
    });
});

Answer 3

给它一个旋转。要实现mouseout，您需要提供第二个悬停功能。您还要确保停止当前动画，以防它已经在进行相反的淡入淡出过程中：

<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，因此可能需要删除/调整。

jQuery Fadin淡出多个DIV

3 个答案: