오버레이 애니메이션을 위해 이미지 DIV를 설정하는 방법

고정 높이와 너비로 올바르게 작동하는 다음 JSFiddle이 있습니다. http://jsfiddle.net/69td39ha/2/ 위로 마우스를 가져 가면 애니메이션이 올바르게 수행됩니다.오버레이 애니메이션을 위해 이미지 DIV를 설정하는 방법

높이와 너비가 고정 된 반응 형 방법을 사용하기 위해 위의 조작을 시도했습니다. 마우스를 올려 놓으면 애니메이션이 올바르게 표시되지 않습니다. http://jsfiddle.net/cer1ts9x/2/

HTML : 나 애니메이션을 보장하기 위해 두 번째 바이올린을 수정 도와주세요은

<div class="pageImgHdrSub percPadTop banner"> 
    <a href="google_events.aspx" title=""><img src="http://appcenter.clickmeeting.com/uploads/2014/05/google-calendar-logo1.gif" alt="" /></a> 
    <p class="companyInfo">View Events Calendar</p> 
    <div class="cornerTL"></div> 
    <div class="cornerTR"></div> 
    <div class="cornerBL"></div> 
    <div class="cornerBR"></div> 
</div>

을 보여주는 제대로

출처

2014-11-12 Si8

애니메이션이 어떤 방식으로 올바르게 표시되지 않습니까? 당신이 그 모든 것을 다 커버하고 싶습니까? – APerson

내가 사용하려고하는 두 번째 이미지 위로 마우스를 가져 가면 원이 이미지의 가운데에 맞춰지지 않습니다. – Si8

당신이 원하는 당신의 fiddle

희망 업데이트? JS의

.pageImgHdrSub -> width: auto; 

.banner div{ 
    -moz-border-radius:170px; 
    -webkit-border-radius:170px; 
    border-radius:170px; 
}

라인 16 :

기본적으로 3 곳 편집

el.find('div').stop().animate({width:340,height:200},'slow',function(){

EDIT : 동일한 양에 대한 원 애니메이션 세트 폭과 높이

. (js에서) 테두리 반경은 너비/높이의 절반으로 멋진 서클을 얻을 수 있어야합니다.

출처

2014-11-12 14:32:52

그 것처럼 보입니다. 나는 지금 시험 할 것이다. 감사,. – Si8

바이올린에 편집을위한 업데이트가 있습니까? :) – Si8

아니요. 위의 코드는 위의 코드를 사용합니다. 편집의 코드는 다음과 같습니다. [fiddle] (http://jsfiddle.net/cer1ts9x/5/) –

사진은 사각 전에, 지금은 사각형의 이미지를 가지고 있었다 - 당신은 완벽한 둥근 원을 얻을 수 있지만, 애니메이션 기능에 width & height을 변경하면 잘 다소 작동 할 수 있도록 :

el.find('div').stop().animate({ 
    width: 360, 
    height: 160 
},

Updated JsFiddle

출처

2014-11-12 14:36:20 urbz

응답 해 주셔서 감사합니다. – Si8

오버레이 애니메이션을 위해 이미지 DIV를 설정하는 방법

답변

관련 문제