•  10-10-2019
  •  | 
  •  

Frage

Ich möchte ein Hover-Effekt zu div Boxen Appy, auf einer Seite 60 Boxen sein kann bis. Es sollte ganz gleich den CSS-Hover-Effekt sein, aber ich will einen Fade-Effekt auf die Hover-Farbe anzuwenden. Z.B. Ich habe hellgrün als Hintergrundfarbe und dunkelgrün als Hintergrundfarbe schweben, dann sollte es von der einen auf die andere Seite verblassen.

spielte ich ein bisschen herum mit jQuery, kann aber das Ergebnis erhalten, dass ich wollte: 

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

Lösung

Sie benötigen einen verwenden anständige Farbe Plug-in . Siehe jQuery animieren background für weitere Informationen.

Auch Ihr Original-Code ist nicht wirklich etwas tun wird, wie Sie es zu animieren zu einer anderen Farbe wollen danach. 

$(".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: siehe http://jsfiddle.net/eHXNq/2/ zum Beispiel.

Andere Tipps

Ich habe nicht viel Erfahrung mit jQuery, aber es sieht aus wie ein gewöhnlicher Fehler copy-and-paste, da Sie haben die gleiche Farbe in beiden .animate()s

Ich glaube, Sie nicht verwenden, die hover Funktion wie Sie sollten. die zweite Funktion wird verwendet, wenn der Benutzer das Feld verlassen, damit Ihr auf die ursprüngliche Farbe zurückgeben sollte.

White zum Beispiel: 

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

siehe Beispiel hier

http://jsfiddle.net/krRse/

Sie diesen Code überprüfen, ich denke, das könnte Ihnen helfen !!! 

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

einen Blick auf diesen Link zu, http://api.jquery.com/hover/

60 Boxen? Bitte verwenden Ereignis Delegation oder zu Hause ist.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top