正在褪色的圖片被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是我的一個弱區，所以這個解決方案可能對您很明顯，但我希望它有幫助。祝你好運！