jQuery vuelo estacionario animación

StackOverflow https://stackoverflow.com/questions/4458309

  •  10-10-2019
  •  | 
  •  

Pregunta

Quiero appy un efecto de vuelo estacionario a div cajas, pueden ser de hasta 60 cuadros en una página. Debe ser bastante igual al efecto de CSS, pero quiero aplicar un efecto de fundido al color de la libración. P.ej. Tengo luz verde como color de fondo y de color verde oscuro como color de fondo estacionario, entonces debería desaparecer de la una a la otra parte.

he jugado un poco por ahí con jQuery, pero podría obtener el resultado que quería: 

    $(".box").hover(function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 1000);
    },function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 500);
    });
¿Fue útil?

Solución

Se necesita utilizar un decente de color plug-in . Ver jQuery animado backgroundColor para más información.

Además, su código original no es realmente va a hacer nada, como quiera que para animar a otro color después. 

$(".box").each( function () {
  $(this).data('baseColor',$(this).css('color'));
  $(this).hover(function() {
    $(this).animate({ backgroundColor: "#68BFEF" }, 1000);
  },function() {
    $(this).animate({ backgroundColor: $(this).data('baseColor') }, 500);
  });
});

EDIT: ver http://jsfiddle.net/eHXNq/2/ por ejemplo.

Otros consejos

No tengo mucha experiencia con jQuery, pero parece que sólo un error de copiar y pegar, ya que tiene el mismo color en ambas .animate()s

Creo que no está utilizando la función hover como deberías. la segunda función se utiliza cuando el usuario abandona la caja para que su debe volver al color original.

White por ejemplo: 

  $(".box").hover(function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 1000);
    },function() {
        $(this).animate({ backgroundColor: "#FFFFFF" }, 500);
    });

$(".box").hover(
  function () {
 // this is mouseover
  }, 
  function () {
//  this is mouse out
  }
);

véase el ejemplo aquí

http://jsfiddle.net/krRse/

revisar el código, creo que esto podría ayudarle !!! 

 <!DOCTYPE html>
<html>
<head>
  <style>
  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class='fade'>Chips</li>

    <li class='fade'>Socks</li>
  </ul>
<script>
$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  }, 
  function () {
    $(this).find("span:last").remove();
  }
);



//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

</script>

</body>
</html>

echar un vistazo a este enlace también, http://api.jquery.com/hover/

60 cajas? Por favor delegación utilización evento o en vivo.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top