jQuery - 애니메이션이 제대로 작동하지 않습니까?

Question

는이 코드가 있습니다

function move() { 

    $(document).mousemove(function(e){ 
     var x = e.pageX; 
     $('.linkHover').animate({'right': '=' + x + 'px'}, 'slow'); 
    }); 


    } 

을하고, HTML은 다음과 같습니다

<div style="position: relative"> 
    <ul class="linksColl"> 
     <li><a href="#"><img onmouseover="move()" src="images/links/communicate.png" alt="" width="175" height="78" border="0" /></a></li> 
     <li><a href="#"><img onmouseover="move()" src="images/links/library.png" alt="" width="125" height="79" border="0" /></a></li> 
     <li><a href="#"><img onmouseover="move()" src="images/links/memory.png" alt="" width="176" height="78" border="0" /></a></li> 
     <li><a href="#"><img onmouseover="move()" src="images/links/discussions.png" alt="" width="137" height="78" border="0" /></a></li> 
     <li><a href="#"><img onmouseover="move()" src="images/links/about.png" alt="" width="126" height="78" border="0" /></a></li> 
     <li><a href="index.php"><img onmouseover="move()" src="images/links/articles.png" alt="" width="125" height="78" border="0" /></a></li> 
    </ul> 
    <div class="linkHover"></div> 
</div> 

나는 헤더 링크를 통해 마우스 만 작동하지 않는 경우 클래스 linkHover과 DIV의 위치를 ​​변경하고 싶습니다.

linksColl DIV가 될 때 어떻게 linkHover DIV가 마우스 커서를 따라 가게 할 수 있습니까?

참고 : 내가 바로 당신을 이해한다면, 나는 매우 비슷한 짓을

,이 또한

function move() {  
    $(document).mousemove(function(e){ 
     var x = e.pageX; 
     $('.linkHover').animate({right:x}, 'slow'); 
    }); 
} 

JS 시도하지 수직

Answer 1

SzamDev에만 수평 따르십시오. 각 LI에 대한 X 좌표를 플롯 한 다음 배열에 추가합니다. 마우스를 올려 놓고 애니메이션하려는 Li의 인덱스가있는 JS 호출을 설정합니다. 이것은 나를 위해 완벽하게 작동했습니다.

var dotLocations = [0, 55, 170, 290, 410]; 
    function showFeature(a) { 
     $("#featureDot").animate({ 
      left: dotLocations[a] 
     }, 150, function() { /* animation complete */}); 
    } 

이 예에서 featureDot는 "showFeature"이 점은 내가 클릭 한 리/버튼 아래에 위치하는 이동 불렀다 그것에 작은 빨간 점과 사업부했다/공중 선회했다.

호프가 도움이 되었기를 바랍니다.

크리스.

Answer 2

애니메이션 TAKS 수, 당신은 너무 =가 유효하고 오류가 발생하여 당신이 x에 right 값을 설정할 나타나는 px

$(document).mousemove(function(e){ 
    var x = e.pageX; 
    $('.linkHover').animate({'right': x}, 'slow'); 
}); 

을 남길 수 있습니다.

코드 예제는 jsfiddle입니다.

Answer 3

변경 라인 :

$('.linkHover').animate({'right': '=' + x + 'px'}, 'slow'); 

$('.linkHover').animate({'right': x}, 'slow'); 

및