1. 홈
  2. 질의 응답
  3. jQuery 마우스 오버시 메뉴 선택에 따라 요소의 페이드 표시 전환 토글

jQuery 마우스 오버시 메뉴 선택에 따라 요소의 페이드 표시 전환 토글

2016-08-05 12 views
0

안녕하세요 "mouseover"또는 "click"이벤트 중 하나를 선택할 수있는 메뉴를 만들었습니다.jQuery 마우스 오버시 메뉴 선택에 따라 요소의 페이드 표시 전환 토글

은 다음을 참조하십시오

<ul class="nav nav-pills nav-justified keyword-navigation"> 
    <li class="active"><a href="#" data-displaypanel="#subjectcollection_A_C">A- C</a></li> 
    <li class=""><a href="#" data-displaypanel="#subjectcollection_D_H">D-H</a></li> 
    <li><a href="#" data-displaypanel="#subjectcollection_I_N">I-N</a></li> 
    ...

선택을의 결과는 내가 이전/기존 선택된 요소를 페이드 아웃 것을 일치하는 ID를 가지고 선택한 요소에 퇴색 할 것입니다 data-displaypanel 속성으로 지정됩니다. 당신은 그것보다 더 떠나기 때문에 완료 할 수있는 기회를 가지고 전에 페이드 아웃 기능을 취소 할 표시되는 다른 메뉴 항목 사이를 빠르게 마우스를 움직일 그러나

이 잘 작동 ...

<ul class="topic-blocks list-unstyled"> 
<li class="keyword-panel" id="subjectcollection_A_C" style="display: list- 
.... 
</li> 
<li class="keyword-panel" id="subjectcollection_D_H" style="display: list- 
.... 
</li>

하나의 요소가 표시됩니다 ....

이 문제를 해결할 수있는 방법이 있습니까? 나는 행운이없는 다양한 방법을 시도했다. https://jsfiddle.net/angusgrant/ov2zezmv/

많은 감사 앵거스

mouseenter 이벤트가 매우 빠르게 실행됩니다

출처

2016-08-05 Angus Grant

답변

0

:

$(".keyword-navigation li > a").on('click mouseenter', function(e) { 
    e.preventDefault(); 
    var ithis = $(this); 
    if (!ithis.parent('li').hasClass('active')){ 
     var prevActivePanel = ithis.closest('.keyword-navigation') 
         .find('.active') 
         .removeClass('active') 
         .children('a') 
         .data('displaypanel'), 
     currentActivePanel= ithis.parent('li') 
           .addClass('active') 
           .end() 
           .data('displaypanel'); 


     $(prevActivePanel).fadeOut("fast", function() { 
      $(this).addClass('hidden'); 
      $(currentActivePanel) 
       .fadeIn("fast", function() { 
        history.pushState(null, null, currentActivePanel); 
       }).removeClass('hidden'); 

     }); 

    } 

});

내 jsfiddle을 참조하십시오. 이 경우 debounce(fn, wait) 기능을 사용할 수 있습니다.

$(prevActivePanel).fadeOut("fast", function() {

에 :

당신이 애니메이션에 (디 바운싱없이) mouseenter 이벤트의 원치 않는 효과를 중지하려면 당신은 또한 당신이 다음 줄을 변경해야 can-someone-explain-the-debounce-function-in-javascript

에 좀 걸릴 수 있습니다 

$(prevActivePanel).stop().fadeOut("fast", function() {

.stop() 역할 : 일치하는 요소에서 현재 실행중인 애니메이션을 중지합니다.

코드 조각 :

$(document).ready(function() { 
 
    $(".js-keyword-navigation li > a:not(.disabled)").on('click mouseenter', function(e) { 
 
    e.preventDefault(); 
 
    var ithis = $(this), 
 
     keywordNav = ithis.closest('.js-keyword-navigation'); 
 

 

 
    if (!ithis.parent('li').hasClass('active')) { 
 
     keywordNav.find('a').addClass('disabled'); 
 
     var prevActivePanel = keywordNav 
 
     .find('.active') 
 
     .removeClass('active') 
 
     .children('a') 
 
     .data('displaypanel'), 
 
      currentActivePanel = ithis.parent('li') 
 
     .addClass('active') 
 
     .end() 
 
     .data('displaypanel'); 
 

 

 
     $(prevActivePanel).stop().fadeOut("fast", function() { 
 
     var ithis = $(this); 
 
     ithis.addClass('hidden'); 
 
     //console.log('previous Active Panel faded out:' + prevActivePanel); 
 
     $(currentActivePanel) 
 
     .fadeIn("fast", function() { 
 
      history.pushState(null, null, currentActivePanel); 
 
      $(this).removeClass('hidden'); 
 
      //console.log('current Active Panel faded in:' + currentActivePanel); 
 
      keywordNav.find('a').removeClass('disabled'); 
 

 
     }) 
 

 
     }); 
 

 
    } 
 

 
    }); 
 
    //check if hash url exists and check an element exists in the DOM that also has the class 'keyword-panel'. 
 
    if (document.location.hash.length > 0 && $(document.location.hash).hasClass('keyword-panel')) { 
 
    // console.log('hash detected:' + document.location.hash); 
 
    $(".js-keyword-navigation li > a[data-displaypanel=" + document.location.hash + "]").trigger('click'); 
 
    } 
 

 
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="subjectscontainer panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title"> 
 
      <i class="fa fa-hashtag"></i> 
 
      Topics 
 
     </h3> 
 
    </div> 
 
    <div class="panel-body keyword-display"> 
 
     <ul class="nav nav-pills nav-justified js-keyword-navigation"> 
 
      <li class=""><a href="#" data-displaypanel="#subjectcollection_A_C" class="">A-C</a></li> 
 
      <li><a href="#" data-displaypanel="#subjectcollection_D_H" class="">D-H</a></li> 
 
      <li><a href="#" data-displaypanel="#subjectcollection_I_N" class="">I-N</a></li> 
 
      <li class="active"><a href="#" data-displaypanel="#subjectcollection_O_R" class="">O-R</a></li> 
 
      <li><a href="#" data-displaypanel="#subjectcollection_S_Z" class="">S-Z</a></li> 
 
     </ul> 
 
     <ul class="topic-blocks list-unstyled"> 
 
      <li class="keyword-panel hidden" id="subjectcollection_A_C" style="display: none;"> 
 
       <ul class="col-sm-3 col-xs-6 list-unstyled"> 
 
        <li><a href="/pub2web/search?value1=Acoustics&amp;option1=fulltext" title="">Acoustics</a></li> 
 
        <li><a href="/pub2web/search?value1=Agricultural+Economics+%26+Policy&amp;option1=fulltext" title="">Agricultural Economics &amp; Policy</a></li> 
 
        <li><a href="/pub2web/search?value1=Agricultural+Engineering&amp;option1=fulltext" title="">Agricultural Engineering</a></li> 
 
        <li><a href="/pub2web/search?value1=Agriculture&amp;option1=fulltext" title="">Agriculture</a></li> 
 
        <li><a href="/pub2web/search?value1=Agriculture%2C+Dairy+%26+Animal+Science&amp;option1=fulltext" title="">Agriculture, Dairy &amp; Animal Science</a></li> 
 
        <li><a href="/pub2web/search?value1=Agriculture%2C+Multidisciplinary&amp;option1=fulltext" title="">Agriculture, Multidisciplinary</a></li> 
 
        <li><a href="/pub2web/search?value1=Agronomy&amp;option1=fulltext" title="">Agronomy</a></li> 
 
        <li><a href="/pub2web/search?value1=Allergy&amp;option1=fulltext" title="">Allergy</a></li> 
 
        <li><a href="/pub2web/search?value1=Anatomy+%26+Morphology&amp;option1=fulltext" title="">Anatomy &amp; Morphology</a></li> 
 
        <li><a href="/pub2web/search?value1=Andrology&amp;option1=fulltext" title="">Andrology</a></li> 
 
        <li><a href="/pub2web/search?value1=Anesthesiology&amp;option1=fulltext" title="">Anesthesiology</a></li> 
 
        <li><a href="/pub2web/search?value1=Anthropology&amp;option1=fulltext" title="">Anthropology</a></li> 
 
        <li><a href="/pub2web/search?value1=Archaeology&amp;option1=fulltext" title="">Archaeology</a></li> 
 
        <li><a href="/pub2web/search?value1=Architecture&amp;option1=fulltext" title="">Architecture</a></li> 
 
        <li><a href="/pub2web/search?value1=Area+Studies&amp;option1=fulltext" title="">Area Studies</a></li> 
 
        <li><a href="/pub2web/search?value1=Art&amp;option1=fulltext" title="">Art</a></li> 
 
       </ul> 
 
       <ul class="col-sm-3 col-xs-6 list-unstyled"> 
 
        <li><a href="/pub2web/search?value1=Arts+%26+Humanities+-+Other+Topics&amp;option1=fulltext" title="">Arts &amp; Humanities - Other Topics</a></li> 
 
        <li><a href="/pub2web/search?value1=Asian+Studies&amp;option1=fulltext" title="">Asian Studies</a></li> 
 
        <li><a href="/pub2web/search?value1=Astronomy+%26+Astrophysics&amp;option1=fulltext" title="">Astronomy &amp; Astrophysics</a></li> 
 
        <li><a href="/pub2web/search?value1=Audiology+%26+Speech-Language+Pathology&amp;option1=fulltext" title="">Audiology &amp; Speech-Language Pathology</a></li> 
 
        <li><a href="/pub2web/search?value1=Automation+%26+Control+Systems&amp;option1=fulltext" title="">Automation &amp; Control Systems</a></li> 
 
        <li><a href="/pub2web/search?value1=Behavioral+Sciences&amp;option1=fulltext" title="">Behavioral Sciences</a></li> 
 
        <li><a href="/pub2web/search?value1=Biochemical+Research+Methods&amp;option1=fulltext" title="">Biochemical Research Methods</a></li> 
 
        <li><a href="/pub2web/search?value1=Biochemistry+%26+Molecular+Biology&amp;option1=fulltext" title="">Biochemistry &amp; Molecular Biology</a></li> 
 
        <li><a href="/pub2web/search?value1=Biodiversity+Conservation&amp;option1=fulltext" title="">Biodiversity Conservation</a></li> 
 
        <li><a href="/pub2web/search?value1=Biodiversity+%26+Conservation&amp;option1=fulltext" title="">Biodiversity &amp; Conservation</a></li> 
 
        <li><a href="/pub2web/search?value1=Biology&amp;option1=fulltext" title="">Biology</a></li> 
 
        <li><a href="/pub2web/search?value1=Biomedical+Social+Sciences&amp;option1=fulltext" title="">Biomedical Social Sciences</a></li> 
 
        <li><a href="/pub2web/search?value1=Biophysics&amp;option1=fulltext" title="">Biophysics</a></li> 
 
        <li><a href="/pub2web/search?value1=Biotechnology+%26+Applied+Microbiology&amp;option1=fulltext" title="">Biotechnology &amp; Applied Microbiology</a></li> 
 
        <li><a href="/pub2web/search?value1=Business&amp;option1=fulltext" title="">Business</a></li> 
 
        <li><a href="/pub2web/search?value1=Business+%26+Economics&amp;option1=fulltext" title="">Business &amp; Economics</a></li> 
 
       </ul> 
 
       <ul class="col-sm-3 col-xs-6 list-unstyled"> 
 
        <li><a href="/pub2web/search?value1=Business%2C+Finance&amp;option1=fulltext" title="">Business, Finance</a></li> 
 
        <li><a href="/pub2web/search?value1=Cardiac+%26+Cardiovascular+Systems&amp;option1=fulltext" title="">Cardiac &amp; Cardiovascular Systems</a></li> 
 
        <li><a href="/pub2web/search?value1=Cardiovascular+System+%26+Cardiology&amp;option1=fulltext" title="">Cardiovascular System &amp; Cardiology</a></li> 
 
        <li><a href="/pub2web/search?value1=Cell+Biology&amp;option1=fulltext" title="">Cell Biology</a></li> 
 
        <li><a href="/pub2web/search?value1=Cell+%26+Tissue+Engineering&amp;option1=fulltext" title="">Cell &amp; Tissue Engineering</a></li> 
 
        <li><a href="/pub2web/search?value1=Clinical+Neurology&amp;option1=fulltext" title="">Clinical Neurology</a></li> 
 
        <li><a href="/pub2web/search?value1=Communication&amp;option1=fulltext" title="">Communication</a></li> 
 
       </ul> 
 
       <ul class="col-sm-3 col-xs-6 list-unstyled"> 
 
        <li><a href="/pub2web/search?value1=Computer+Science&amp;option1=fulltext" title="">Computer Science</a></li> 
 
        <li><a href="/pub2web/search?value1=Computer+Science%2C+Artificial+Intelligence&amp;option1=fulltext" title="">Computer Science, Artificial Intelligence</a></li> 
 
        <li><a href="/pub2web/search?value1=Computer+Science%2C+Cybernetics&amp;option1=fulltext" title="">Computer Science, Cybernetics</a></li> 
 
        <li><a href="/pub2web/search?value1=Computer+Science%2C+Hardware+%26+Architecture&amp;option1=fulltext" title="">Computer Science, Hardware &amp; Architecture</a></li> 
 
        <li><a href="/pub2web/search?value1=Crystallography&amp;option1=fulltext" title="">Crystallography</a></li> 
 
        <li><a href="/pub2web/search?value1=Cultural+Studies&amp;option1=fulltext" title="">Cultural Studies</a></li> 
 
       </ul> 
 
      </li> 
 
      <li class="keyword-panel hidden" id="subjectcollection_D_H"> 
 
       <ul class="col-sm-3 col-xs-6 list-unstyled"> 
 
        <li><a href="/pub2web/search?value1=Dance&amp;option1=fulltext" title="">Dance</a></li> 
 
        <li><a href="/pub2web/search?value1=Demography&amp;option1=fulltext" title="">Demography</a></li> 
 
        <li><a href="/pub2web/search?value1=Dentistry%2C+Oral+Surgery+%26+Medicine&amp;option1=fulltext" title="">Dentistry, Oral Surgery &amp; Medicine</a></li> 
 
        <li><a href="/pub2web/search?value1=Dermatology&amp;option1=fulltext" title="">Dermatology</a></li> 
 
        <li><a href="/pub2web/search?value1=Developmental+Biology&amp;option1=fulltext" title="">Developmental Biology</a></li> 
 
        <li><a href="/pub2web/search?value1=Ecology&amp;option1=fulltext" title="">Ecology</a></li> 
 
        <li><a href="/pub2web/search?value1=Engineering%2C+Aerospace&amp;option1=fulltext" title="">Engineering, Aerospace</a></li> 
 
       </ul> 
 
       <ul class="col-sm-3 col-xs-6 list-unstyled"> 
 
        <li><a href="/pub2web/search?value1=Engineering%2C+Biomedical&amp;option1=fulltext" title="">Engineering, Biomedical</a></li> 
 
        <li><a href="/pub2web/search?value1=Engineering%2C+Chemical&amp;option1=fulltext" title="">Engineering, Chemical</a></li> 
 
        <li><a href="/pub2web/search?value1=Engineering%2C+Civil&amp;option1=fulltext" title="">Engineering, Civil</a></li> 
 
        <li><a href="/pub2web/search?value1=Engineering%2C+Electrical+%26+Electronic&amp;option1=fulltext" title="">Engineering, Electrical &amp; Electronic</a></li> 
 
        <li><a href="/pub2web/search?value1=Engineering%2C+Environmental&amp;option1=fulltext" title="">Engineering, Environmental</a></li> 
 
        <li><a href="/pub2web/search?value1=Engineering%2C+Geological&amp;option1=fulltext" title="">Engineering, Geological</a></li> 
 
       <li><a href="/pub2web/search?value1=Environmental+Sciences&amp;option1=fulltext" title="">Environmental Sciences</a></li> 
 
        <li><a href="/pub2web/search?value1=Environmental+Sciences+%26+Ecology&amp;option1=fulltext" title="">Environmental Sciences &amp; Ecology</a></li> 
 
       </ul> 
 
       <ul class="col-sm-3 col-xs-6 list-unstyled"> 
 
        <li><a href="/pub2web/search?value1=Environmental+Studies&amp;option1=fulltext" title="">Environmental Studies</a></li> 
 
        <li><a href="/pub2web/search?value1=Ergonomics&amp;option1=fulltext" title="">Ergonomics</a></li> 
 
        <li><a href="/pub2web/search?value1=Ethics&amp;option1=fulltext" title="">Ethics</a></li> 
 
        <li><a href="/pub2web/search?value1=Ethnic+Studies&amp;option1=fulltext" title="">Ethnic Studies</a></li> 
 
       <li><a href="/pub2web/search?value1=Genetics+%26+Heredity&amp;option1=fulltext" title="">Genetics &amp; Heredity</a></li> 
 
        <li><a href="/pub2web/search?value1=Geochemistry+%26+Geophysics&amp;option1=fulltext" title="">Geochemistry &amp; Geophysics</a></li> 
 
       </ul> 
 
       <ul class="col-sm-3 col-xs-6 list-unstyled"> 
 
        <li><a href="/pub2web/search?value1=Geography&amp;option1=fulltext" title="">Geography</a></li> 
 
        <li><a href="/pub2web/search?value1=Geography%2C+Physical&amp;option1=fulltext" title="">Geography, Physical</a></li> 
 
        <li><a href="/pub2web/search?value1=Geology&amp;option1=fulltext" title="">Geology</a></li> 
 
        <li><a href="/pub2web/search?value1=Geosciences%2C+Multidisciplinary&amp;option1=fulltext" title="">Geosciences, Multidisciplinary</a></li> 
 
        <li><a href="/pub2web/search?value1=Geriatrics+%26+Gerontology&amp;option1=fulltext" title="">Geriatrics &amp; Gerontology</a></li> 
 
        <li><a href="/pub2web/search?value1=Gerontology&amp;option1=fulltext" title="">Gerontology</a></li> 
 
       <li><a href="/pub2web/search?value1=Humanities%2C+Multidisciplinary&amp;option1=fulltext" title="">Humanities, Multidisciplinary</a></li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

출처

2016-08-05 12:20:06 gaetanoM

 관련 문제

  • 관련 문제 없음^_^