jQuery Fadin in Fade Out for Multiple DIVs

StackOverflow https://stackoverflow.com/questions/9743003

Question

I have an image slider that I need to fade out in order to display one of many new content blocks on hover. Unfortunately, I am having trouble getting on fade out to complete before the new content is displayed. Can anyone see what I am doing wrong? 

<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() {});
        });
    });
});​
Was it helpful?

Solution

So from all the information you supplied I can only conclude that you're somehow trying to overcomplicate things.

Just for demonstration purposes and since it is still somewhat of a guess what you want I made this to show the effect I think you want to achieve:

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

A few notes about this example:

  • I took the liberty to reform the html a bit but I stuck to how your html looks like but I changed id names and left out irrelevant stuff you need to move the extra/special slides into a container with the links that need to activate them.
  • I used smaller sizes and none of the elaborate detail you have in the end design to display only the relevant html, css and script you need for this.
  • I used a simple slider I made myself for the slides but the actual plugin used for this is irrelevant; its for display purposes.

Let me know if this is the desired effect and I will outline the steps needed to make your html work with it.

As a note; I see you're using lists which may be more semantically correct; my example could use lists too if needed but its slightly more work.

OTHER TIPS

Your code is both fading out and fading in the content at the same time. I'm not sure if this is what you were going for. I simplified your code to just fade out .slider-wrapper, and fade in #attract-container.

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

Give this a whirl. To implement a mouseout, you supply a second function to hover. You also want to make sure you stop the current animation, in case it is already in the process of doing the opposite fade:

<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>

You can probably remove the style="display:none". I'm guessing you already have that as a part of your style-sheet. I also am using Google's JQuery so that might need removed/tweaked.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top