jQuery vol stationnaire animation

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

  •  10-10-2019
  •  | 
  •  

Question

Je veux un effet Appy vol stationnaire à div boîtes, peut être jusqu'à 60 cases sur une page. Il devrait être tout à fait égal à l'effet de vol stationnaire css, mais je veux appliquer un effet de fondu à la couleur de vol stationnaire. Par exemple. Je vert clair comme couleur de fond et vert foncé que la couleur d'arrière-plan de vol stationnaire, il devrait disparaître de l'un à l'autre côté.

Je joue un peu partout avec jQuery mais pourrait obtenir le résultat que je voulais: 

    $(".box").hover(function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 1000);
    },function() {
        $(this).animate({ backgroundColor: "#68BFEF" }, 500);
    });
Était-ce utile?

La solution

Vous devez utiliser un plug-in couleur décente. Voir jQuery Animer backgroundColor pour plus d'informations.

En outre, votre code d'origine ne va pas vraiment faire quoi que ce soit, comme vous le voulez Animer à une autre couleur par la suite. 

$(".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: voir http://jsfiddle.net/eHXNq/2/ par exemple.

Autres conseils

Je n'ai pas beaucoup d'expérience avec jQuery, mais il semble que juste une erreur de copier-coller, puisque vous avez la même couleur dans les deux .animate()s

Je crois que vous n'utilisez pas la fonction hover comme vous devriez. la deuxième fonction est utilisée lorsque l'utilisateur quitte la zone afin que votre devrait revenir à la couleur d'origine.

blanc par exemple: 

  $(".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
  }
);

voir par exemple ici

http://jsfiddle.net/krRse/

revoir ce code, je pense que cela pourrait vous aider !!! 

 <!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>

jeter un oeil à ce lien aussi, http://api.jquery.com/hover/

60 cases? S'il vous plaît délégation d'événements d'utilisation, ou en direct.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top