2011-12-20 3 views
1

내 사이트에 3 개의 div 상자를 약간 띄우고 마우스를 올려 놓을 때까지 천천히 '가리 키기'를 원합니다. 그런 다음 내 사용자 정의 호버 효과가 이미 사용하고 있습니다. (흔들림/덜거덕 거림 및 불투명도). 그러나 나는 약간의 애니메이션을 얻는 방법에 대해 잘 모르겠다.div 상자 주위를 약간 떠 다니는 것

여기 내가 내 피들과 어울리는 곳이야 - 내가 뭘 놓친 거니?

http://jsfiddle.net/7t5q9/

답변

1

당신은 당신의 예에서 기간을 지정하지 않았습니다. 지금까지 div의 천천히 다음과 같이 애니메이션을 무작위 상단 반복 애니메이션과 왼쪽 값을 적용 할 수있는, 주위에 플 로트 만들기로 :

$(function() { 
    var timeout; 
    function moveAimlessly() { 
     $(".aimless").each(function() { 
      $(this).stop().animate({ 
       top: Math.floor(Math.random()*2) == 1 ? "+=" + Math.floor(Math.random()*41).toString() : "-=" + Math.floor(Math.random()*41).toString(), 
       left: Math.floor(Math.random()*2) == 1 ? "+=" + Math.floor(Math.random()*41).toString() : "-=" + Math.floor(Math.random()*41).toString() 
      }, 4000); 
     }); 
     timeout = setTimeout(moveAimlessly, 4000); 
    } 
    moveAimlessly(); 

    $(".aimless").on("hover", function() { 
     clearTimeout(timeout); 
     $(".aimless").stop(); 
    }); 
}); 

예를 링크 : http://jsfiddle.net/7zZEG/1/

+0

그게 최고,하지만 수 있도록하는 방법은 무엇입니까 호버가 떠난 후 사업부가 계속 떠돌아 다녔습니까? –

+0

@ cam77 물론,'$ (". aimless"). on ("hover", function() {...'. –

0

catch되지 않은 오류 ReferenceError가 : 지속 시간은

변화를 다음과 같이 정의되지 않은 :

http://jsfiddle.net/7t5q9/2/

관련 문제