거품처럼 자랄 수있는 div를 만듭니다.

Question

div 안에 원형 배경 이미지가 있습니다. 함께 시작하려면 '거품'을 표시 할 필요가 없습니다. 그 페이지에 도착한 후에 버블은 버블이나 다른 말로 '팝 (pop)'과 같은 장소로 자랄 것입니다. 나는 jquery에서 이것을 어떻게 만들지 모르겠다. 이것은 또한 어떤 도움이 당신에게 아이디어를 줄 것이다

Answer 1

팝업 효과를 사용하려면 4 가지 스타일을 애니메이션화해야합니다. CSS 환경 설정에 따라 상단 및 왼쪽으로 애니메이션을 적용하거나 여백 (왜?) 여백 - 위쪽 및 여백 - 왼쪽을 사용하는 경우 당신은 왼쪽에서 오른쪽 아래로가 아니라 바깥으로 "거품"확장 센터의 효과를냅니다.

이

var newHeight = 300; 
var newWidth = 300; 

jQuery('#element').animate({ 
    "top":newHeight/2, 
    "left":newWidth/2, 
    "height":newHeight, 
    "width":newWidth, 
    "opacity":1 
}, 'fast', easeInOutCirc); 

당신은 여기에 여유 효과 찾을 수 있습니다 왼쪽 상단의 jQuery를 예 /입니다 : http://gsgd.co.uk/sandbox/jquery/easing/

의, 당신은 당신의 질문을 좀 더 구체적으로해야 우리를 주목할 필요가 독자들을 신경 쓰지 마라.

Answer 2

jQuery show() function

jQuery animate

감사하겠습니다 IE7 +를 포함한 모든 브라우저에서 작동해야합니다. 이미지를 사용하여 달성하려는 것을 설명 할 수도 있습니다.

필요한 콘텐츠를 만든 다음 원하는 결과를 얻기 위해 콘텐츠를 변경하는 방법을 사람들에게 묻는 것이 좋습니다. 사람들이 쉽게 대답 할 수 있습니다.

Answer 3

이것은 this fiddle의 단순화 된 버전이다. 나는 당신이하고있는 것과 매우 비슷한 것을했다. 희망이 도움이됩니다.

function(){ 
    var position = $('#bubbleposition'), 
     bubble = $('#bubble'), 
     startRadius = 200, 
     newRadius = 400, 
     startleft = 10, 
     starttop = 10, 
     endleft = 50, 
     endtop = 50; 
    position.css({left: startleft, top: starttop, 10)}); 
    bubble.css({height: startRadius, width: startRadius}); 
    position.animate({left: endleft, top: endtop}); 
    bubble.animate({height: newRadius, width: newRadius}, 400); 
} 

<div id='bubbleposition'> 
    <div id='bubble'> 
     Hello! 
    </div> 
</div>