•  10-10-2019
  •  | 
  •  

Domanda

Voglio appy un effetto hover a div scatole, può essere fino a 60 scatole in una pagina. Dovrebbe essere abbastanza pari all'effetto css hover ma voglio applicare un effetto di dissolvenza al colore hover. Per esempio. Ho verde chiaro come colore di sfondo e verde scuro come colore di sfondo passaggio del mouse, allora dovrebbe svanire da quello verso l'altro lato.

ho suonato un po 'in giro con jQuery ma potrebbe ottenere il risultato che volevo: 

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

Soluzione

È necessario utilizzare un decente colore plug-in . Per ulteriori informazioni, vedere jQuery animato backgroundColor .

Inoltre, il codice originale non è realmente intenzione di fare nulla, come si vuole animare a un altro colore in seguito. 

$(".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: vedi http://jsfiddle.net/eHXNq/2/ per esempio.

Altri suggerimenti

Non ho molta esperienza con jQuery, ma sembra che solo un errore di copia e incolla, dal momento che hanno lo stesso colore in entrambe le .animate()s

Credo che non si utilizza la funzione hover come si dovrebbe. la seconda funzione viene utilizzata quando l'utente lascia la scatola in modo che le dovrebbe tornare al colore originale.

Bianco per esempio: 

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

vedi esempio qui

http://jsfiddle.net/krRse/

rivedere questo codice, penso che questo potrebbe aiutare !!! 

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

dare un'occhiata a questo link troppo, http://api.jquery.com/hover/

60 boxes? Please use event delegation, or live.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top