如何停止在沒有時間間隔懸停期間使用jquery的所有圖像旋轉

我需要停止使用jquery鼠標懸停在一個圓圈中的多個圖像旋轉，而不指定時間間隔。我嘗試了兩種方式。如何停止在沒有時間間隔懸停期間使用jquery的所有圖像旋轉

1. stops the one image using the div id in hover. 
$(document).ready(function() { 
    $('#friends2').hover(function() { 
        $(this).stop(); 
        }, function() { 
         moveit(); 
        }); 

2. created a common class id 'a' for images and the stops in hover. 
$(document).ready(function() { 
$('.a').hover(function() { 
       $(this).stop(); 
       }, function() { 
        moveit(); 
       }); 
my script as 

    <script type="text/javascript"> 
    var p = 0;  

    function moveit() { 
    p += .01; 

    var r = 165; 
    var xcenter = 550; 
    var ycenter = 300; 


    var newLeft = Math.floor(xcenter + (r* Math.cos(p+90))); 
    var newTop = Math.floor(ycenter + (r * Math.sin(p+90))); 

    var newLeft1 = Math.floor(xcenter + -(r* Math.cos(p+120))); 
    var newTop1 = Math.floor(ycenter + -(r * Math.sin(p+120))); 

    var newLeft2 = Math.floor(xcenter + (r* Math.cos(p+390))); 
    var newTop2 = Math.floor(ycenter + (r * Math.sin(p+390))); 

    $('#friends').animate({ 
      top: newTop, 
      left: newLeft, 
     }, 10, function() { 
      moveit(); 
      }); 
    $('#friends2').animate({ 
     top: newTop1, 
     left: newLeft1, 
    },10, function() { 
     moveit(); 
    }); 
    $('#friends3').animate({ 
     top: newTop2, 
     left: newLeft2, 
    },10, function() { 
     moveit(); 
    }); 
}

問題是盤旋不適用於所有圖像..是否有任何其他方法..建議??

來源

2012-05-14 kk1076

現場演示中看到此鏈接：http://jsfiddle.net/nanoquantumtech/KRBaF/ – Thulasiram

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      setInterval(function() { moveit(); }, 10); 

      $('[id^=friends]').hover(function() { 
       $(this).addClass('Stop'); 
      }, function() { 
       $(this).removeClass('Stop'); 
      }); 

      var p = 0; 

      function moveit() { 
       if ($('img.a.Stop').length === 0) { 
        p += .01; 
        var r = 165; 
        var xcenter = 550; 
        var ycenter = 300; 

        var newLeft = Math.floor(xcenter + (r * Math.cos(p + 90))); 
        var newTop = Math.floor(ycenter + (r * Math.sin(p + 90))); 

        var newLeft1 = Math.floor(xcenter + -(r * Math.cos(p + 120))); 
        var newTop1 = Math.floor(ycenter + -(r * Math.sin(p + 120))); 

        var newLeft2 = Math.floor(xcenter + (r * Math.cos(p + 390))); 
        var newTop2 = Math.floor(ycenter + (r * Math.sin(p + 390))); 

        $('#friends1').animate({ 
         top: newTop, 
         left: newLeft 
        }, 10); 

        $('#friends2').animate({ 
         top: newTop1, 
         left: newLeft1 
        }, 10); 

        $('#friends3').animate({ 
         top: newTop2, 
         left: newLeft2 
        }, 10); 
       } 
      } 
     }); 
    </script> 
    <style type="text/css"> 
    .a 
     { 
     width:100px; 
     heigth:100px; 
     position: relative; 
    } 
    </style> 
</head> 
<body> 
    <img alt="" class="a" id="friends1" src="http://www.imageurlhost.com/images/uffodkj65ykm87t1twcn.jpg" /> 
    <br /> 
    <img alt="" class="a" id="friends2" src="http://www.imageurlhost.com/images/w6ozdx840xmlvgzo6mt4.jpg" /> 
    <br /> 
    <img alt="" class="a" id="friends3" src="http://www.imageurlhost.com/images/i0ndbnhlg0zfvnyxrgd.jpg" /> 
</body> 
</html>

來源

2012-05-14 12:25:16 Thulasiram

我嘗試使用這兩種方法。當所有3張圖像都懸停時，此腳本不起作用。 – kk1076

k ...你可以在http://jsfiddle.net/中添加你的html，css和jquery代碼。我需要看到你的HTML代碼... – Thulasiram

現場演示請參閱此鏈接：http：//jsfiddle.net/nanoquantumtech/KRBaF/ – Thulasiram

$("[id^='friends']").on({ 
    mouseenter: function() { 
     $(this).stop(); 
    }, 
    mouseleave: function() { 
     moveit(); 
    } 
});

來源

2012-05-14 12:23:05 adeneo

ID^=的朋友需要或只有第一個ID 3個圖像的所有值？ – kk1076

它將選擇以朋友開頭的元素（圖片）ID。作爲參考請參閱此鏈接：http://api.jquery.com/attribute-starts-with-selector/ – Thulasiram

如何停止在沒有時間間隔懸停期間使用jquery的所有圖像旋轉

回答

相關問題