Umwandeln CSS Hover jquery Hover

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

  •  13-09-2019
  •  | 
  •  

Frage

Ich bin den Aufbau einer Website mit Hover-Effekte. Siehe http://vitaminjdesign.com/index.html und Blick auf den Servicebereich in der rechten unteren Ecke . Ich verwende: schweben die Hintergrundfarbe zu ändern. Ich möchte Jquery verwenden, um das gleiche Ergebnis mit einem eleganten verblassen acheive. Hier ist mein html: 

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

(6-mal wiederholt mit verschiedenen Bildern und Text)

Grundsätzlich, wenn .iconrow gerollt wird, möchte ich den Hintergrund von keinem auf Hintergrundfarbe zu ändern: #cccccc; und wenn es abgerollt, zurück zu keinem.

War es hilfreich?

Lösung

Hinweis: I gebaut und getestet über Firebug meine Lösung auf den Link arbeiten Sie zur Verfügung gestellt. Wenn Sie diese Schritte folgen, um, sollten Sie es voll funktionsfähiges

Sie werden nicht in der Lage sein, von transparent zu einer Farbe zu animieren, außer in Safari und Firefox 3.5 und anderem Browser, die RGBA Hintergrundfarben unterstützen. Wenn Sie eine Cross-Browser-Unterstützung suchen, dann würde ich das Problem, wie dieser Angriff:

1. Haben Sie Ihre Standard-Hover-Effekte durch eine nicht-js Klasse scoped, so dass die :hover Effekte als Fallback funktioniert. Eine gute Möglichkeit, dies zu tun, ist wie folgt: 

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

Dies ändert no-js, bevor die Seite sogar Displays js.

2. jQuery an der Seite Ihres a Tags Blindelemente hinzuzufügen (js das Blindelement in Schritt 3 ist hinzuzufügen)

Hier ist die CSS zu verwenden: 

.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 in und aus dem neuen Blindelement auf mouseenter und 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);
   });
});

Schließlich seien Sie vorsichtig, wenn Sie sich entscheiden, anstelle der festen Farbe ein Bild Hintergrund zu verwenden. IE7 und IE8 können die Opazität von 24-Bit-PNG-Dateien nicht ändern. Es völlig vermasselt die Transparenz.

Andere Tipps

Sie werden die jquery Farbanimation Plugin benötigen: http://plugins.jquery.com/project / color

Und dann einige Code wie folgt 

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

EDIT:

Per dcneiner Kommentar, wenn Sie die endgültige Farbe sein, keine wollen, sollten Sie eine Callback-Funktion, um die Animation hinzufügen, um die Farbe ändern auf „none“, nachdem es Animieren getan hat. Ich schätze, dass auf „none“ Animieren ist nicht definiert. Sie können #fff auf eine Farbe in der Nähe Ihren Hintergrund ändern, um die endgültigen Übergang zu helfen zu glätten.

Die belebte Signatur ist: 

animate(params, [duration], [easing], [callback])
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top