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跟隨鼠標光標？

注意：我想只跟隨水平而不是垂直

Answer 1

SzamDev，

試試這個JS

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

另外，如果我理解你的話，我做了一些非常相似的事情。 嘗試為每個LI繪制X co-ord，然后添加到數組中，將鼠標懸停在其上，設置一個JS調用，其中包含您希望設置為動畫的li的索引。 這對我很有用。

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

在這個例子中，featureDot是一個帶有一個小紅點的div，當調用“showFeature”時，點移動到位於我點擊/懸停的li /按鈕下面。

希望這可以幫助，

克里斯。

Answer 2

動畫取得一個數字，你可以省略px

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

您似乎想要將right值設置為x因此使用=無效並導致您的錯誤。

關於jsfiddle的代碼示例。

Answer 3

換行：

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

至

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

並確保你已使用類linkHover absolute ， relative或fixed和好運