JQuery Fadin в Fade Out для нескольких DIV

У меня есть ползунок изображения, который мне нужен, чтобы отобразить один из множества новых блоков контента при наведении курсора. К сожалению, у меня возникают проблемы с постепенным исчезновением до завершения отображения нового контента. Кто-нибудь может увидеть, что я делаю не так?

<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() {});
        });
    });
});​
Источник

3 ответа

Решение

Таким образом, из всей предоставленной вами информации я могу только заключить, что вы каким-то образом пытаетесь все усложнить.

Просто для демонстрационных целей, и поскольку это все еще что-то вроде предположения о том, что вы хотите, я сделал это, чтобы показать эффект, который, я думаю, вы хотите достичь:

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

Несколько заметок об этом примере:

  • Я позволил себе немного реформировать html, но я остановился на том, как выглядит ваш html, но я изменил имена идентификаторов и пропустил ненужные вещи, которые вам нужны, чтобы переместить дополнительные / специальные слайды в контейнер со ссылками, которые должны активировать их.
  • Я использовал меньшие размеры и ни одну из сложных деталей, которые у вас есть в конечном дизайне, чтобы отобразить только соответствующие HTML, CSS и сценарии, которые вам нужны для этого.
  • Я использовал простой слайдер, который я сделал для слайдов, но сам плагин, используемый для этого, не имеет значения; его для целей отображения.

Дайте мне знать, если это желаемый эффект, и я опишу шаги, необходимые для того, чтобы ваш HTML работал с ним.

Как примечание; Я вижу, вы используете списки, которые могут быть более семантически правильными; Мой пример может использовать списки, если это необходимо, но это немного больше работы.

Источник

Ваш код одновременно исчезает и исчезает в контенте. Я не уверен, что это то, что ты собирался. Я упростил ваш код, чтобы просто исчезать.slider-wrapper и переходить в # привлекает контейнер.

$(document).ready(function()
{
    $("#attract").hover(function()
    {
        $(".slider-wrapper").fadeOut('fast', function ()
        {
            $("#attract-container").fadeIn('fast');
        });
    });
});
Источник

Дайте это вихрь. Чтобы реализовать указатель мыши, вы предоставляете вторую функцию для наведения мыши. Вы также хотите удостовериться, что остановили текущую анимацию, если она уже выполняет обратное затухание:

<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, так что, возможно, потребуется удалить / настроить.

Источник
Другие вопросы по тегам