1
JQuery 애니메이션 메뉴 작업을하고 있습니다. 이것은 내 질문에 관한 코드의 일부일뿐입니다.JQuery와 CSS를 사용하여 이미지 공개 background-position : jitters (firefox 제외) + 백분율 수수께끼
저는 (JQuery를 사용하여) 움직이는 div가 많아서 좌우로 확장됩니다. div에서 배경 이미지를 사용하고 div가 확장되고 축소 될 때 이미지가 움직이지 않도록 유지하려고합니다.
여기에 (작동하는) 완전한 예제가 있습니다.이를 시도하려면 .html로 저장하십시오. (당신은 어떻게 든 유래이 첨부 할 수 있습니까?) 당신을 위해
<!DOCTYPE html>
<html>
<head>
<title>JQuery Jitter Bug</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
body { background: #0f1923; margin:0px; padding:0px;}
div#logo {
border: 0px;
margin: 0px;
padding: 0px;
background-image: url("http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif");
background-position:20%;
position: absolute;
height: 53px;
left: 100px;
width: 100px;
top: 50px;
}
</style>
</head>
<body>
<div id="logo"></div>
<script>
$('div#logo').mouseenter(function(){$(this).animate({left: "0px", width: "600px"}, 1000); }); /* show */
$('div#logo').mouseleave(function(){$(this).animate({left: "100px", width: "100px"}, 1000); }); /* crop */
</script>
</body>
</html>
두 질문 :
1) 어떻게 그 배경 포지션 비율이
을 계산합니까? 시행 착오를 통해 20 %가 정확하다는 것을 알 수 있습니다. div는 펼치면 왼쪽 = 0, 너비 = 600 픽셀, 축소하면 왼쪽 = 100, 너비 = 100입니다. 그게 어떻게 20 %가되는거야? 축소 된 크기 (100/600 = 16.666 %?)의 왼쪽 가장자리가 아니어야합니다. 분명히 아니지만 왜 그렇지 않습니까?2) 파이어 폭스에서는 보이지 않지만 파이어 폭스처럼 보이지만 Safari와 Chrome에서는 (애니메이션이 켜져 있습니다.) 애니메이션이 진행될 때 이미지가 흔들립니다. 다른 브라우저에서 더 잘 보이도록 수정하는 방법에 대한 아이디어가 있습니까?
'시행 착오로 20 %가 정확하다는 것을 보여줍니다. "- 무슨 뜻입니까? 20 %는 어떤 의미로 정확합니까? 고정시키는 데있어 배경 위치 픽스 애니메이션의 고정 단위 (예 : px) 값 – WTK
아, 또 하나,'.animate'를하기 전에'.stop()'을 추가하는 것이 좋을 것입니다. 그렇지 않으면 여러개의 빠른 롤오버를 할 때 애니메이션은 X 번 발사 될 것이고 컨테이너는 성장하고 줄어들 것입니다. – WTK
http://jsbin.com/eyojah에서 예제를 게시 한 Martin B.에 대한 찬사 – PapaFreud