내가이 정말 간단하고 효과적인 jQuery를 스크립트에 적응하기 위해 찾고 있어요 : jQuery to animate image from left to right? (감사 DonamiteIsTnt를) ...jQuery를 이미지를 애니메이션하기 : 왼쪽과 오른쪽 플립/회전 효과
싶습니다는 방법을 알고 확장하여 두 개의 이미지를 "전환"애니메이션으로 효과적으로 사용할 수 있습니다. 예를 들어, 새가 화면의 오른쪽으로 날아갑니다. - 뒤집기 애니메이션 - 새는 왼쪽으로 다시 날아가는 것처럼 보입니다. 플립 애니메이션이 오른쪽으로 다시 날아갑니다.
"전환"애니메이션 2D 이미지의 선을 따라 효과적으로 생각하고있었습니다 (금붕어가 그릇에서 앞뒤로 수영하고 유리 앞에서 어떻게 보이는지).
이 경우 하나의 이미지를 사용하고 30px 너비에서 0px로 축소 한 다음 -30px 등으로 줄이면 다른 방법이 될 수 있습니다. 또는 오른쪽 방향 이미지와 왼쪽 방향 이미지간에 전환해야합니다. 어느 쪽이든, 애니메이션으로 만들면 멋질 것입니다.
왼쪽 및 오른쪽 효과와 뒤집기 효과를 언급하면서이 사이트에서 비슷한 질문을 발견했지만이를 결합하지는 않았습니다. 그래서 어떤 도움을 주시면 감사하겠습니다! 보조 노트로
: 나는 http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js편집에 연결 한 : 여기까지 ...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function beeRight() {
$("#b").animate({left: "+=300"}, 5000, "swing", beeLeft);
$("#img").attr("src","rightArrow.gif");
}
function beeLeft() {
$("#b").animate({left: "-=300"}, 5000, "swing", beeRight);
$("#img").attr("src","leftArrow.gif");
}
beeRight();
});
</script>
</head>
<body>
<div id="b" style="position:absolute;"><img id="img" src="rightArrow.gif"></div>
</body>
가 어떻게 다음과 같은 애니메이션 이미지 스왑을 추가 할 수있으세요 : http://davidwalsh.name/demo/css-flip.php - 불필요한에 말하자면, 복잡 할 필요는 없습니다. 나는 div의 것이 아니라 img의 것으로 이것을하려고합니다. 어떻게 이런 식으로 CSS에서 할 것이라고 이해하지만 jQuery/Javascript 함께 통합하는 방법을 모르겠습니다.
다시 한번 감사드립니다!
이미지를 변경하는 것은 사용하는 요소에 따라 다릅니다. '![]()
'을 사용하면 애니메이션 방향을 확인하기 전에'scr' 속성을 변경해야합니다. 다른 요소를 사용하는 경우 배경 이미지를 사용하고 변경해야 할 부분은 아마도 사용합니다. –
대부분![]()
일 가능성이 높습니다. 대부분의 응용 프로그램에서 정적 배경을 오버레이 할 가능성이 높기 때문에 더 유용합니다. CSS 포지셔닝과 Z- 인덱스를 사용하여 하나 이상의 애니메이션 (예 : 새와 벌이 독립적으로 움직이는 애니메이션)을 한 곳에서 쉽게 얻을 수 있다고 생각합니다 ...? 좀 더 유연해질 것이라고 생각합니까? –
'![]()
'은 완벽하게 괜찮습니다. 애니메이션의 방향을 바꾸기 전에'$ ("# img"). attr ("src", "flyleft.jpg"); 같은 것을 사용하십시오. –