JQuery 가로형 아코디언 배너 절대 위치 지정 오류

Question

다음 코드는 JQuery 기반 가로 애니메이션 시스템을 작동합니다.

$(document).ready(function(){ 
    maxWidth = 700; 
    minWidth = 65; 
    normWidth = 192; 

    var featspos = 0; 

    $('.featuredslider a').each(function(){ 
     $(this).css('left', featspos+'px'); 
     featspos += 192; 
    }); 

    $(".featuredslider a").mouseenter(function(){ 
     var featscur = $(this).index(); 
     $('.featuredslider a').each(function(){ 
      featspos = 0; 
      $(this).animate({left: featspos},800); 
      if($(this).index() == featscur){ featspos += 700 } else { featspos += 65; }; 
     }); 
    }); 
    $(".featuredslider a").mouseleave(function(){ 
     $(this).css('left', featspos+'px'); 
     featspos += 192; 
    }); 
}); 

마우스가 그림 중 하나에 들어가 자마자 모두 정확히 왼쪽으로 이동하기 때문에 이음새가 절대 위치 지정 문제가됩니다. 0px; 또한 다시 가져 오는 기능은 작동하지 않습니다. 그들은 단지 0px에 앉아 있습니다.

참조 용 FIDDLE을 설정 했으므로이 문제를 해결하는 데 도움이되기를 바랍니다. 이 mouseleave 했어야 할 때 당신은 mouseenter 이벤트에 .each 루프를했다 http://jsfiddle.net/mblase75/FzaxF/6/

: http://jsfiddle.net/FzaxF/1/

Answer 1

나는 몇 가지 변경을했다. 또한 featspos을 mouseleave 이벤트 시작시 0으로 재설정하고 사용자가 애니메이션 처리를 완료하기 전에 마우스를 끈 경우 애니메이션을 중단하기 위해 stop()을 추가했습니다.

마지막으로 이미지 리셋 기능을 사용하여 중복 코드를 제거했습니다.

$(document).ready(function() { 
    maxWidth = 700; 
    minWidth = 65; 
    normWidth = 192; 

    function resetter() { 
     var featspos = 0; 
     $('.featuredslider a').each(function() { 
      $(this).stop().css('left', featspos + 'px'); 
      featspos += 192; 
     }); 
    } 
    resetter(); 

    $(".featuredslider a").mouseenter(function() { 
     var featscur = $(this).index(); 
     featspos = 0; 
     $(this).animate({ 
      left: featspos 
     }, 800); 
     if ($(this).index() == featscur) { 
      featspos += 700 
     } else { 
      featspos += 65; 
     }; 
    }); 
    $(".featuredslider a").mouseleave(function() { 
     resetter(); 
    }); 

});