javascript - index - jquery obtener data id
jQuery para animar la imagen de izquierda a derecha? (6)
Tengo una imagen de Bee y quiero animarla usando jQuery.
La idea es mover la imagen de la izquierda (fuera de la pantalla) a la derecha (fuera de la pantalla) para crear un efecto como si estuviera volando.
En caso de que quieras que la abeja siga volando por la pantalla, prueba esto :-)
<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>
Haría algo como esto: 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
});
Ten cuidado, este código solo funciona con la abeja: P
Trate de forma simple: http://spritely.net/
Tu abeja necesita estar absolutamente posicionada, algo como esto:
<div id="b" style="position:absolute; top:50px">B</div>
He usado un div aquí, pero podría ser una etiqueta <img> . Como meo señaló, no olvide el atributo top , porque algunos navegadores no funcionan sin él. Entonces puedes animarlo:
$(document).ready(function() {
$("#b").animate({left: "+=500"}, 2000);
$("#b").animate({left: "-=300"}, 1000);
});
Here hay una demostración de jsfiddle.
Si desea tener una animación continua como lo señaló Hira, coloque el código de animación en funciones, asegúrese de que el movimiento hacia la izquierda y hacia la derecha sea el mismo, y use la opción onComplete de animate () para llamar a la siguiente animación:
function beeLeft() {
$("#b").animate({left: "-=500"}, 2000, "swing", beeRight);
}
function beeRight() {
$("#b").animate({left: "+=500"}, 2000, "swing", beeLeft);
}
beeRight();
Y el fiddle para eso.
<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
>
<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`