Question

I have a javascript drop down menu that drops over a javascript picture slideshow. They both work well, except when I rollover the menu while one picture is fading out. When this happens, the javascript menu (which is overlapping the pictures) also fades out/back in again. How could I fix this? Thanks! Code is below.

Fading pictures html:

<div id = "slide_wrapper">
        <img id = "slider" src = "">
        </img>
    </div>

Fading pictures javascript:

$(document).ready(function()
{
var images = new Array ("images/CampCeliac360Degree.jpg", "images/array_pool.jpg",     "images/array_2.jpg", "images/array_3.jpg", "images/array_4.jpg");
$("#slider").attr('src', images[0])
var currimg = 1;
setInterval(function(){
        $("#slider").fadeOut('medium', (function(){
            $("#slider").attr('src', images[currimg]).stop(true,true).hide().fadeIn('slow'); 
            if(currimg < images.length - 1){
                currimg++;
            }else{
                currimg = 0;
            }       
        })
        );

},5000);

Drop down menu html:

<!-- creating menu -->
    <div id = "nav_div">
        <ul id="navigation">
            <li id="home">
                <a href="#" class="nav_style" id="home_a">Home</a>
            </li>
            <li id="sign_ups">
                <a href="#" class="nav_style" id="sign_ups_a">Sign-ups</a>
                <ul class="sub_nav_style" id="sign_ups_sub">
                    <li>
                        <a href="#">Camper Sign-up</a>
                    </li>
                    <li>
                        <a href="#">Junior Counselor Sign-up</a>
                    </li>
                    <li>
                        <a href="#">Counselor Sign-up</a>
                    </li>
                </ul>
            </li>
            <li id="info">
                <a href="#" class="nav_style" id="info_a" name="info_a">Information</a>
                <ul class="sub_nav_style" id="info_sub">
                    <li>
                        <a href="#">Facts You Need</a>
                    </li>
                    <li>
                        <a href="#">Contact Information</a>
                    </li>
                    <li>
                        <a href="#">Vendor Information</a>
                    </li>
                </ul>
            </li>
            <li id="about_camp">
                <a href="#" class="nav_style" id="about_camp_a" name="about_camp_a">About Camp</a>
                <ul class="sub_nav_style" id="about_camp_sub">
                    <li>
                        <a href="#">What People Say</a>
                    </li>
                    <li>
                        <a href="#">Sample Menu</a>
                    </li>
                    <li>
                        <a href="#">Photos</a>
                    </li>
                </ul>
            </li>
            <li id="donate">
                <a href="#" class="nav_style" id = "donate_a">Make a Donation</a>
            </li>
        </ul>
    </div>

Drop down menu javascript:

// JavaScript Document
$(document).ready(function()
{
// main rolls
$("#sign_ups_a").hover(function(){
    $(this).toggleClass("nav_style_roll");
});
$("#home_a").hover(function(){
    $(this).toggleClass("nav_style_roll");
});
$("#info_a").hover(function(){
    $(this).toggleClass("nav_style_roll");
});
$("#about_camp_a").hover(function(){
    $(this).toggleClass("nav_style_roll");
});
$("#donate_a").hover(function(){
    $(this).toggleClass("nav_style_roll");
});
//sub rolls sign ups
$("ul#navigation li#sign_ups ul li:eq(0) a").hover(function(){
    $(this).toggleClass("sub_nav_style_bround_roll");
    $("#sign_ups_a").toggleClass("nav_style_roll_off");
});
$("ul#navigation li#sign_ups ul li:eq(1) a").hover(function(){
    $(this).toggleClass("sub_nav_style_bround_roll");
    $("#sign_ups_a").toggleClass("nav_style_roll_off");
});
$("ul#navigation li#sign_ups ul li:eq(2) a").hover(function(){
    $(this).toggleClass("sub_nav_style_bround_roll");
    $("#sign_ups_a").toggleClass("nav_style_roll_off");
});
// sup rolls info
$("ul#navigation li#info ul li:eq(0) a").hover(function(){
    $(this).toggleClass("sub_nav_style_bround_roll");
    $("#info_a").toggleClass("nav_style_roll_off");
});
$("ul#navigation li#info ul li:eq(1) a").hover(function(){
    $(this).toggleClass("sub_nav_style_bround_roll");
    $("#info_a").toggleClass("nav_style_roll_off");
});
$("ul#navigation li#info ul li:eq(2) a").hover(function(){
    $(this).toggleClass("sub_nav_style_bround_roll");
    $("#info_a").toggleClass("nav_style_roll_off");
});
//sub rolls about_camp
$("ul#navigation li#about_camp ul li:eq(0) a").hover(function(){
    $(this).toggleClass("sub_nav_style_bround_roll");
    $("#about_camp_a").toggleClass("nav_style_roll_off");
});
$("ul#navigation li#about_camp ul li:eq(1) a").hover(function(){
    $(this).toggleClass("sub_nav_style_bround_roll");
    $("#about_camp_a").toggleClass("nav_style_roll_off");
});
$("ul#navigation li#about_camp ul li:eq(2) a").hover(function(){
    $(this).toggleClass("sub_nav_style_bround_roll");
    $("#about_camp_a").toggleClass("nav_style_roll_off");
});
//slide toggles
$("#sign_ups").hover(function(){
        if(playing == 1){
            playing = 0;
        }else{
            playing = 1;
        }
        $("#sign_ups_sub").slideToggle('fast');
    });
    $("#info").hover(function(){
        if(playing == 1){
            playing = 0;
        }else{
            playing = 1;
        }
        $("#info_sub").slideToggle('fast');

    });
    $("#about_camp").hover(function(){
        if(playing == 1){
            playing = 0;
        }else{
            playing = 1;
        }
        $("#about_camp_sub").slideToggle('fast');
    });
});
});

Answer 1

I think the stop function is conflicting with your on hover menu animation. I’m pretty sure the stop function affects all animation on the page. Can you tell us the purpose for it?

This is the code I am referring to:

$("#slider").attr('src', images[currimg]).stop(true,true).hide().fadeIn('slow'); 

As far as fixing the problem, for detecting if a particular animation is running, you can create a variable that detects this sort of thing. Something like:

var anim;


    setInterval(function(){
    anim = 1;
    $("#slider").attr('src', images[currimg]).hide().fadeIn('slow', function(){
    anim = 0;
         });
    }); 

Javascript is kind of a weak area of mine so this solution may be obvious to you, but I hope it helps. Good luck!