褪色图片被javascript下拉菜单干扰(Fading pictures being interfered with by javascript drop down menu)

我有一个javascript下拉菜单，下载javascript图片幻灯片。它们都运行良好，除非当一张图片淡出时翻转菜单。当发生这种情况时，javascript菜单（与图片重叠）也会再次淡入/淡出。我怎么能解决这个问题？谢谢！代码如下。

褪色图片html：

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

<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'); }); }); });

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:

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:

<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'); }); }); });

最满意答案

我认为停止功能与您的悬停菜单动画相冲突。我很确定stop函数会影响页面上的所有动画。你能告诉我们它的目的吗？

这是我所指的代码：

$("#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是我的一个弱点，所以这个解决方案可能对你来说很明显，但我希望它有所帮助。祝你好运！

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!

更多推荐