javascript - 褪色图片被javascript下拉菜单干扰

Question

我有一个 javascript 下拉菜单，它会覆盖 javascript 图片幻灯片。它们都很好用，除非我在一张图片淡出时滚动菜单。发生这种情况时，javascript 菜单(与图片重叠)也会淡出/再次淡入。我该如何解决这个问题？谢谢!代码如下。

褪色图片html:

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

褪色图片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);

下拉菜单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>

下拉菜单 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

我认为停止功能与悬停菜单动画冲突。我很确定停止功能会影响页面上的所有动画。您能告诉我们这样做的目的吗？

这是我指的代码:

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

就解决问题而言，为了检测特定动画是否正在运行，您可以创建一个变量来检测此类事件。像这样的东西:

var anim;


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

Javascript 是我的一个薄弱环节，所以这个解决方案对你来说可能是显而易见的，但我希望它能有所帮助。祝你好运!