jQuery Fadin in Fade Out for Multiple DIVs

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

Answer 1

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.