Tengo una imagen Bee y quiero animarla usando jQuery.jQuery para animar la imagen de izquierda a derecha?
La idea es mover la imagen desde la izquierda (fuera de la pantalla) a la derecha (fuera de la pantalla) para crear un efecto como si estuviera volando.
Su abeja necesita ser absolutamente posicionado, algo como esto:
<div id="b" style="position:absolute; top:50px">B</div>
He usado un div aquí, pero igual de bien podría ser una etiqueta <img>. Como meo señaló, no olvides el atributo top, porque algunos navegadores no funcionan sin él. A continuación, puede animarlo:
$(document).ready(function() {
$("#b").animate({left: "+=500"}, 2000);
$("#b").animate({left: "-=300"}, 1000);
});
Here es una demostración jsFiddle.
Si desea tener una animación continua como Hira señaló, ponga el código de animación en funciones, asegúrese de que el movimiento hacia la izquierda y 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.
no se olvide de proporcionar una posición superior para evitar el comportamiento inesperado en los navegadores, no lo menciono :) – meo
pero animará una sola vez sin movimiento continuo. –
@meo, está bien, muy buen punto. Solo estaba tratando de salir con la menor cantidad de trabajo. Espero que la abeja se coloque en la parte superior, así como algunas otras cosas (fondo, si está en suspensión, etc.). – Donamite
me gustaría hacer 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
});
abeja cuidado, este código sólo funciona con la abeja de: P
En caso de que quiera la abeja de Siga volando por la pantalla, intente 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>
<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
>
este código para mover una imagen de izquierda a derecha continuamente sin distorsión – 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`
esta para dos imágenes se mueve de izquierda a derecha y de derecha a izquierda, no a la vez. Cuando la imagen en el lado izquierdo (primera imagen) se mueve hacia la derecha regrese a la posición de inicio y la primera imagen se ocultará.y ahora la imagen en el lado derecho (segunda imagen) ti ahora su oculto hará que se muestre y comience a moverse hacia la izquierda y se oculte después de que llegue a la posición izquierda y nuevamente vuelva a comenzar posición y el proceso repite ) eso no se muestra hasta la 1ra ocultación de la imagen – rakesh
Desafortunadamente jQuery no funciona en la abeja, pájaros. Eche un vistazo al sitio jQuery, hay una documentación bastante decente sobre la función animada, y cómo hacer exactamente este tipo de cosas, ¡con pájaros que sí lo es! – adeneo