두 개의 jquery 함수가 서로 간섭합니다.

Question

비슷한 두 가지 기능 (하나는 마우스 오버, 다른 하나는 클릭)을 수행하고 서로 간섭하는 것처럼 보이는 2 개의 jquery 기능이 있습니다. 첫 번째는 hover에서 jquery UI switchclass를 사용하여 배경을 변경합니다. 이것은 또한 하위 메뉴를 가져옵니다. 하위 메뉴에서 링크를 클릭하면 이전 메뉴를 제거하는 클릭 기능이 실행됩니다. switchclass를 사용하여 해당 배경을 변경합니다. 문제는 마우스를 움직이면 마우스 아웃이 발생하고 배경을 기본 배경으로 다시 변경하는 것입니다.

이것은 마우스 오버입니다.

 $('.hoverbg').mouseover(
    function(){ 
    var newimg = $(this).attr('data-bgsrc'); 
    $('#bg img[src="'+newimg+'"]').switchClass("inactive", "active", 0, "easeInOutQuad"); 
    $('#bg img[src!="'+newimg+'"]').switchClass("active", "inactive", 0, "easeInOutQuad"); 
    }); 
$('.nav').mouseout 
(function(){ 
    if ($('#sitewrapper').hasClass("c")) 
    { 
     event.stopImmediatePropagation() 
    } 
    else 
    { 
     $('#bg img[src="images/bg.jpg"]').switchClass("inactive", "active", 0, "easeInOutQuad"); 
     $('#bg img[src!="images/bg.jpg"]').switchClass("active", "inactive", 0, "easeInOutQuad"); 
    } 
    }); 

여기에 click 이벤트가 있습니다. 그것은 mouseout의 일부인 nav 클래스를 숨 깁니다. 기술적으로 나는 당신이 그 메뉴의 mouseout 만들었다 고 생각하지만, 클래스에 sitewrapper div를 추가하고 클래스가 있으면 멈 춥니 다.

$('a#navclick').click(function(){ 
var iclick = $(this).attr('data-iclick'); 
var clickimg = $(this).attr('click-data-bgsrc'); 
if ($('#topId').hasClass('.topOn')) 
{ 
    $('#bg img[src="'+clickimg+'"]').switchClass("inactive", "active", 0, "easeInOutQuad"); 
    $('#bg img[src!="'+clickimg+'"]').switchClass("active", "inactive", 0, "easeInOutQuad"); 
} 
else 
{ 
$('#sitewrapper').addClass("c"); 
$('img.logo').hide("drop", {direction: "down"}, 1000); 
$('.nav').hide("drop", {direction: "down"}, 1000); 
$('#bg img[src="'+clickimg+'"]').switchClass("inactive", "active", 0, "easeInOutQuad"); 
$('#bg img[src!="'+clickimg+'"]').switchClass("active", "inactive", 0, "easeInOutQuad"); 
$('#topId').addClass('topOn'); 
$('#topId').show("slide", {direction:"up"}, 1000); 
} 
}); 

Answer 1

알아 냈습니다. 클릭 기능은 이렇게 생겼습니다.

$('a#navclick').click(function(){ 
var iclick = $(this).attr('data-iclick'); 
var clickimg = $(this).attr('click-data-bgsrc'); 
if ($('#topId').hasClass('topOn')) 
{ 
    $('#bg img[src="'+clickimg+'"]').switchClass("inactive", "active", 0, "easeInOutQuad"); 
    $('#bg img[src!="'+clickimg+'"]').switchClass("active", "inactive", 0, "easeInOutQuad"); 
} 
else 
{ 
$('#topId').addClass('topOn'); 
$('img.logo').hide("drop", {direction: "down"}, 1000); 
$('.nav').hide("drop", {direction: "down"}, 1000); 
$('#bg img[src!="'+clickimg+'"]').switchClass("active", "inactive", 0, "easeInOutQuad"); 
$('#bg img[src="'+clickimg+'"]').switchClass("inactive", "active", 0, "easeInOutQuad"); 
$('#topId').show("slide", {direction:"up"}, 1000); 
} 
}); 

호버 (hover) 기능을 사용하려면 클릭이 발생하면 중지 기능을 사용해야합니다. 그래서 나는 click 이벤트가 topOn이라는 가시적 인 div에 클래스를 추가하도록했습니다. div에 topOn 클래스가 있는지 확인하는 if 문을 추가했습니다. 이것은 다음과 같이 보입니다.

 $('.hoverbg').mouseenter(
    function(){ 
    var newimg = $(this).attr('data-bgsrc'); 
    $('#bg img[src="'+newimg+'"]').switchClass("inactive", "active", 0, "easeInOutQuad"); 
    $('#bg img[src!="'+newimg+'"]').switchClass("active", "inactive", 0, "easeInOutQuad"); 
    }); 
$('.hoverbg').mouseleave 
(function(){ 
    if(jQuery('#topId').hasClass('topOn')) 
    { 
    jQuery('.hoverbg').stop(); 
    } 
    else 
    { 
    $('#bg img[src="images/bg.jpg"]').switchClass("inactive", "active", 0, "easeInOutQuad"); 
    $('#bg img[src!="images/bg.jpg"]').switchClass("active", "inactive", 0, "easeInOutQuad"); 
    } 
});