Mam obraz Bee i chcę animować go za pomocą jQuery.jQuery do animowania obrazu od lewej do prawej?
Chodzi o to, aby przesunąć obraz z lewej (poza ekranem) na prawą (poza ekranem), aby uzyskać efekt podobny do latania.
Twój pszczoła musi być pozycjonowany bezwzględnie, coś takiego:
<div id="b" style="position:absolute; top:50px">B</div>
Użyłem div tutaj, ale może równie dobrze być tag <img>. Jak zauważył meo, nie zapomnij o atrybucie top, ponieważ niektóre przeglądarki nie działają bez niego. Następnie można je animować:
$(document).ready(function() {
$("#b").animate({left: "+=500"}, 2000);
$("#b").animate({left: "-=300"}, 1000);
});
Here jest jsfiddle demo.
Jeśli chcesz mieć ciągłą animację, jak wskazała Hira, umieść kod animacji w funkcjach, upewnij się, że lewy i prawy ruch jest taki sam, i użyj opcji onComplete z animacji(), aby wywołać następną animację:
function beeLeft() {
$("#b").animate({left: "-=500"}, 2000, "swing", beeRight);
}
function beeRight() {
$("#b").animate({left: "+=500"}, 2000, "swing", beeLeft);
}
beeRight();
I do tego fiddle.
Nie zapomnij podać najwyższej pozycji, aby uniknąć nieoczekiwanego zachowania w przeglądarkach, nie wspominając :) – meo
, ale będzie to animować tylko jeden raz bez ciągłego ruchu. –
@meo, prawda jesteś, bardzo dobry punkt. Po prostu próbowałem uciec z najmniejszą ilością pracy. Spodziewam się, że pszczoła będzie umieszczona na górze, a także kilka innych rzeczy (tło, czy spriting, itp.). – Donamite
chciałbym zrobić coś takiego: http://jsfiddle.net/Uwuwj/2/
var b = function($b,speed){
var beeWidth = $b.width();
$b.animate({ //animates the bee to the right side of the screen
"left": "100%"
}, speed, function(){ //when finished it goes back to the left side
$b.animate({
"left": 0 - beeWidth + "px"
}, speed, function(){
b($b, speed) //finally it recalls the same function and everything starts again
});
});
};
$(function(){ //document ready
b($("#b"), 5000); //calls the function
});
pszczoła Uważaj, ten kod działa tylko z Pszczeli: P
W przypadku, gdy chcesz się pszczoła do lataj po ekranie, spróbuj tego :-)
<html>
<head>
<script type="text/javascript" src="jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function animateImage() {
console.log("Called");
$('#bee').css({right:'10%'});
$('#bee').animate({right: '-100%'}, 5000, 'linear', function(){animateImage();});
}
$(document).ready(function() {
animateImage();
});
</script>
</head>
<body>
<div style="width: 100%;"><img src="bee.jpg" id="bee" style="position:relative;"/></div>
</body>
<script type="text/javascript" src="jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function rgt() {
$('#sldr').animate({ left: "500" }, 10000, hider);
}
rgt();
function hider() {
$('#sldr').css('left', '0px');
rgt();
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="sldr" src="../Images/animated%20images/birds/rightfuglan.gif" style="position:absolute" />
</div>
</form>
</body
>
ten kod do przenoszenia obrazu od lewej do prawej w sposób ciągły bez zniekształceń – rakesh
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function() {
var k = $(window).width();
function rgt() {
$('#sldl').hide(1);
$('#sldr').animate({ left: "1000" }, 10000, hider);
}
rgt();
function hider() {
$('#sldr').css('left', '0px');
$('#sldr').hide(1);
$('#sldl').show();
lft();
}
function lft() {
$('#sldl').animate({ left: "0" }, 10000, hidel);
}
function hidel() {
$('#sldl').css('left', '1000px');
$('#sldr').show();
rgt();
}
});
</script>
<style type="text/css">
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="sldl" src="../Images/animated%20images/birds/fuglan.gif" style="position:absolute; right:0px" />
<img id="sldr" src="../Images/animated%20images/birds/rightfuglan.gif" style="position:absolute" />
</div>
</form>
</body>`enter code here`
ten obraz dla dwóch obrazów przesuwa się od lewej do prawej i prawej do lewej, nie za jednym razem. Gdy obraz po lewej stronie (pierwszy obraz) przesuwa się ponownie w prawo po nim powrócić do pozycji wyjściowej, a 1. zdjęcie będzie się ukrywać.i teraz obraz po prawej stronie (drugi obraz) ti teraz jego ukryta wola została pokazana i zaczyna przesuwać się w lewo i ukryć po osiągnięciu lewej pozycji i znowu wróciła do startu pozycja i proces powtarzają się ) i nie wyświetlają się, dopóki 1 obraz nie zostanie ukryty – rakesh
Niestety jQuery nie działa na pszczoły, ptaki. Spójrz na stronę jQuery, jest całkiem przyzwoita dokumentacja na temat funkcji animacji i jak robić dokładnie takie rzeczy, z ptakami, które są! – adeneo