Bubble with Jquery Effect

Question

일단 모든 거품을 초기 크기로 한 번씩 확대하고 싶습니다.

내 JS 바이올린은 다음과 같습니다 http://jsfiddle.net/ASPZm/

내가 자동 호버 효과를 한 번에 모든 거품이 효과로드를 보여주고 싶어요.

내 노력 코드를 수동으로 호출하여 mouseover 이벤트를 트리거 할 수 있습니다

$(document).ready(function() { 
var i = 20; 
$('.box').animate({ 
    width: '30px', 
    opacity: '1', 
    height: '30px', 
    marginLeft: '-15px', 
    marginTop: '-15px' 
}, 2000); 

$('.box').each(function (i) { 
    setTimeout(function() { 
     $(this).stop(true, false).animate({ 
      width: '200px', 
      height: '200px', 
      marginLeft: '-105px', 
      marginTop: '-105px', 
      fontSize: '40px', 
      opacity: '1', 
     }, 200).addClass('sachin').find("strong").css("display", "block"); 
     $(this).stop(true, false).animate({ 
      width: '30px', 
      height: '30px', 
      marginLeft: '-15px', 
      marginTop: '-15px', 
      fontSize: '20px', 
     }, 300).removeClass('sachin').find("strong").css("display", "none"); 
    }, 400 * i); 
}); 

$('.box').hover(function() { 
    $(this).stop(true, false).animate({ 
     width: '200px', 
     height: '200px', 
     marginLeft: '-105px', 
     marginTop: '-105px', 
     fontSize: '40px', 
     opacity: '1', 
    }, 300).addClass('sachin').find("strong").css("display", "block"); 
}, function() { 
    $(this).stop(true, false).animate({ 
     width: '30px', 
     height: '30px', 
     marginLeft: '-15px', 
     marginTop: '-15px', 
     fontSize: '20px', 
    }, 300).removeClass('sachin').find("strong").css("display", "none"); 
}); 
}); 

Answer 1

입니다 :

$(".box").trigger("mouseover"); 

모든 핸들러 적용 후.

Demo

Answer 2

.animate()는 애니메이션이 완료된 후에 수행되는 콜백 기능을 갖는다. 모든 호버 기능을 별도의 함수로 가져올 수 있으며 .animate() 콜백에서 새 함수를 호출 할 수 있습니다.