JQuery와 - 반복과/else 문은 한 번만 작동하면 사업부를 제거하고 앞에 추가 한 후/다시는 빨간색 밑줄이 표시되는 메뉴 항목 위에 마우스를 가져 가면 내가 제공 jsFiddle 파일에서

Question

https://jsfiddle.net/9harsfb6/

작동하지 않습니다 .. . 그때 당신이 떠돌아 다니다 때 다시 가져 가려고 붉은 선이 나타나지 않습니다 .... 나는 빨간 선이 주어진 항목 아래에 나타날 때마다 나는 그 위에 마우스를 올리고 싶다. 2. 마우스를 가져 가면 수있을 것. 하나의 요소에서 다음 요소로 부드럽게 움직입니다. 제 jffiddle 데모에서 볼 수 있습니다. 그러나 모든 것은 첫 번째 호버에서만 작동합니다.

CSS :

 <ul id="menu"> 
        <li class="slider1"><a id="omnie" href="">o mnie</a></li> 
        <li class="slider2"><a id="oferta" href="">oferta</a></li> 
        <li class="slider3"><a id="etyczny" href="">kod etyczny</a></li> 
        <li class="slider4"><a id="referencje" href="">referencje</a></li> 
        <li class="slider5"><a id="kontakt" href="">kontakt</a></li> 
       </ul> 

JQuery와 :

$(document).ready(function() { 

    $('ul').on('mouseenter', function() { 
      $('body').prepend('<div id="object1"></div>'); 
     }); 

    $('ul#menu').mouseleave(function() { 
     $('div#object1').fadeOut(300, function() { $(this).remove(); }) ; 
     }); 
}); 




$(document).ready(function(e) { 
      var i=1; 
       $('ul#menu li.slider1').on({ 

          mouseenter: function(e) { 

          if(i<2) { 
          $('div#object1').css('position', 'absolute');      
          $('div#object1').css('width', '100px'); 
          $('div#object1').css('height', '5px');         
          $('div#object1').css('right', 620); //or wherever you want it 
          $('div#object1').css('top', 75); 
          $('div#object1').fadeIn(1000);        
          i++;} else { 

            $('div#object1').css('position', 'absolute'); 
            $('div#object1').css('width', '100px'); 
            $('div#object1').css('height', '5px');        

            $('div#object1').stop().animate({right:620, top:75, opacity:1}, 700); 

        } 
       }  
    }); 

       $('ul#menu li.slider2').on({ 

          mouseenter: function(e) { 

          if(i<2) { 
          $('div#object1').css('position', 'absolute');        
          $('div#object1').css('width', '100px'); 
          $('div#object1').css('height', '5px');         
          $('div#object1').css('right', 480); //or wherever you want it 
          $('div#object1').css('top', 75); 
          $('div#object1').fadeIn(1000);        
          i++;} else { 

            $('div#object1').css('position', 'absolute'); 
            $('div#object1').css('width', '100px'); 
            $('div#object1').css('height', '5px');        

            $('div#object1').stop().animate({right:490, top:75, opacity:1}, 700); 


        } 
       }  
    });  
}); 

Answer 1

귀하의 i 변수가 리셋을 얻을 수 없다, 그래서 사업부가 제거 된 후에는 if (i <2) 블록 사업부로하고있는 초기화가 다시 실행 결코 극복 다시 붙였다.

수정할 현재 코드의 최소한의 변경은 모든 함수가 동일한 i 변수에 액세스 할 수 있도록 문서 준비 핸들러 (어쨌든해야 함)를 결합한 다음 ul 요소 mouseleave 처리기 재설정 i ~ 1. 데모 : https://jsfiddle.net/9harsfb6/3/ ("깔끔한"버튼을 클릭하면 얼마나 쉽게 코드를 읽을 수 있습니까?)

코드가 상당히 단순화 될 수 있습니다. div에 동일한 속성을 설정 한 것으로 보입니다. 여러 장소에서 같은 값. 모든 것을 JS에서 CSS로 옮길 수 있습니다. 당신은 페이지 html에 div를 추가하거나 제거하는 대신 시작할 수 있습니다. 그리고 ul 요소의 mouseout 이벤트 처리기가 .slider1 요소의 마우스를 트리거하도록 숨길 수 있습니다. 이런 식으로 뭔가 : https://jsfiddle.net/9harsfb6/5/

// JS that works with the div in the page html and all the 
// positioning and size nonsense in the CSS: 
$(document).ready(function() { 
    $('ul#menu').mouseleave(function() { 
    $('ul#menu li.slider1').trigger('mouseenter'); 
    }); 

    $('ul#menu li.slider1').on({ 
    mouseenter: function(e) { 
     $('div#object1').stop().animate({ 
     right: 620, 
     opacity: 1 
     }, 700); 
    } 
    }); 

    $('ul#menu li.slider2').on({ 
    mouseenter: function(e) { 
     $('div#object1').show().stop().animate({ 
     right: 490, 
     opacity: 1 
     }, 700); 
    } 
    }); 
}); 

Answer 2

함수가해야 할 필요가 무엇을 결정하기 위해 같은 카운터를 사용하여 일반적으로 좋은 생각이 아니다. 또한

$(document).ready(function() { 

    var hidden = true; 

    $('ul').on('mouseenter', function() { 
     $('body').prepend('<div id="object1"></div>'); 
    }); 

    $('ul#menu').mouseleave(function() { 
     $('div#object1').fadeOut(300, function() { 
      $(this).remove(); 
      hidden = true; 
     }); 
    }); 

    $('ul#menu li.slider1').on({ 

     mouseenter: function (e) { 

      if (hidden) { 
       ... 

       hidden = false; 
      } else { 

      } 
     } 
    }); 

, 당신이 돈 ' 간단한 해결 방법은 두 가지 document.ready 함수 같은 것을 부울로 카운터를 교체하고 기능 점검과 그에 따라 값의 설정 및 병합하는 것 마우스를 올릴 때마다 div를 제거하고 앞에 추가하거나 추가해야합니다.