jQuery - 動畫不能正常工作？

我有這樣的代碼：jQuery - 動畫不能正常工作？

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>

我想改變姿勢的DIV類linkHover當鼠標放在標題鏈接，但它不工作。

如何讓linkHover DIV在linkColl DIV上跟隨鼠標光標？

注：我想跟進只是水平不垂直

來源

2011-03-23 Saleh

您需要以確保'linkhover'也是'absolute'或'relative'，對於'right'參數來說工作。 – 2011-03-23 11:04:57

SzamDev，

試試這個JS

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

另外，如果我理解你的權利，我做了一些非常相似。嘗試爲每個LI繪製X座標，然後添加到數組中，使用鼠標懸停，設置一個JS調用，其中包含您希望生成的li的索引。這對我來說非常合適。

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

在這個例子中featureDot是有一個小紅點在裏面，當「showFeature」被稱爲點移動力/按鈕，我點擊下位於一個div /徘徊。

希望這會有所幫助，

Chris。

來源

2011-03-23 10:59:19

動畫TAKS一個號碼，你可以離開了px

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

要在right值設置爲x看起來是這樣使用=是無效的，並會導致錯誤。

代碼示例jsfiddle。

來源

2011-03-23 10:59:32

更改線路：

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

到

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

做出的linkHoverabsolute，relative或fixed 和良好的運氣類確保你使用的位置

來源

2011-03-23 11:12:34 Prakash

jQuery - 動畫不能正常工作？

回答

相關問題