la conversione di css hover a jQuery hover

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

  •  13-09-2019
  •  | 
  •  

Domanda

Sto costruendo un sito web con effetti hover. Vedere http://vitaminjdesign.com/index.html e guardare la sezione servizi in basso a destra . Sto usando: hover per modificare il colore di sfondo. Voglio usare jQuery per acheive lo stesso risultato con un elegante dissolvenza. Ecco il mio html: 

<div class="iconrow">
   <a href="#"><img src="images/icon1.png" border="0" width="35" />
   <h2>Website Design</h2></a>
</div>

(ripetuto 6 volte con immagini e testo diversi)

In sostanza, quando .iconrow sono rotolati sopra, voglio lo sfondo per passare da nessuno a background-color: # CCCCCC; e quando si è rotolato fuori, di nuovo a nessuno.

È stato utile?

Soluzione

Nota: ho costruito e testato la mia soluzione con Firebug per lavorare sul link che hai fornito. Se si seguono questi passaggi in ordine, si dovrebbe avere pienamente funzionante

Non sarà in grado di animare da transparent ad un colore, tranne in Safari e Firefox 3.5 e altri browser che supportano i colori di sfondo RGBA. Se siete alla ricerca di un supporto cross browser, quindi vorrei attaccare il problema in questo modo:

1. sono gli effetti al passaggio del mouse di default con scope da una classe non-js, quindi gli effetti :hover funzionerà come un ripiego. Un ottimo modo per fare questo è la seguente: 

<html class="no-js">
   <head>
     .... meta, title, link tags ...
     <script type="text/javascript">document.documentElement.className = "js";</script>
     .... other scripts ...
   </head>

Questo cambia no-js al js prima che la pagina viene visualizzata anche.

2. utilizzare jQuery per aggiungere elementi fittizi lungo il lato i tag a (js per aggiungere l'elemento fittizio è nella fase 3)

Ecco il CSS da utilizzare: 

.js .iconrow { background: none !important } /* Hide current hover effect */

.iconfader {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background-color: #ccc;
  z-index: 5;
}

.iconrow { position: relative } /* Spans are absolute, need the parent to be relative */
.iconrow a { position: relative; z-index: 10} /* Needs to sit on top */

3. Fade dentro e fuori il nuovo elemento fittizio sul mouseenter e mouseleave 

$('.iconrow').each(function(){
   var $span = $("<span class='iconfader'></span>").css('opacity',0.0).appendTo(this);
   $(this).hover(function(){
       $span.stop().animate({opacity: 0.8}, 200);
   }, function(){
       $span.stop().animate({opacity: 0.0}, 200);
   });
});

Infine, fare attenzione se si decide di utilizzare lo sfondo di un'immagine al posto del colore solido. IE7 e IE8 non possono alterare l'opacità del file PNG 24bit. Esso completamente le viti la trasparenza.

Altri suggerimenti

Avrete bisogno del colore jquery animazione plugin: http://plugins.jquery.com/project / color

E poi un po 'di codice come questo 

$(".iconrow").hover(
    function() {
        $(this).animate( { "background-color": "#ccc" }, normal );
    },
    function() {
        $(this).stop(true, true).animate( { "background-color": "#fff" }, normal );
    }
);

Modifica

Per il commento di dcneiner, se si desidera che il colore finale di essere nessuno, dovreste aggiungere una funzione di callback per l'animazione per cambiare il colore di "nessuno" dopo che è fatto l'animazione. Sto indovinando animare a "nessuno" non è definito. È possibile modificare #fff ad un colore vicino al vostro sfondo per rendere più agevole il passaggio definitivo.

La firma animato è: 

animate(params, [duration], [easing], [callback])
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top