jQuery alternative für fade-in/fade-out der div-hintergrund

Den folgenden code hat 2 separate <div> Elemente jeweils mit einem Bild im inneren. Wenn ich den Cursor über entweder div das hintergrund-Farbe, die verblasst und dann heraus - perfekt!!

Ich habe diese web-Seite funktioniert wunderbar in Firefox, aber es funktioniert einfach nicht ball spielen im IE, so Frage ich mich, ob es eine jQuery-version, die Erreichung der gleichen?

Hier ein jsfiddle wenn es hilft: http://jsfiddle.net/mcgarriers/NJe63/

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
    .box, .box2 {
        float:left;
        width:200px;
        height:200px;
        background:blue;
        -webkit-transition: background 1s;
    }
    .box:hover {
        background:red;
        transition: background 1s;;
        -moz-transition: background 1s;; /* Firefox 4 */
        -webkit-transition: background 1s;; /* Safari and Chrome */
        -o-transition: background 1s;; /* Opera */
    }
    .box2:hover {
        background:black
    }
    </style>

</head>
<body>


    <div class="box">
        <img src="http://www.internetlearningsociety.com/images/logos/google_logo3.jpg" />
    </div>

    <div class="box2">
        <img src="http://www.internetlearningsociety.com/images/logos/google_logo3.jpg" />
    </div>

</body>

</html>

Gibt es eine einfache Möglichkeit mit jQuery zu replizieren, was ich versuche zu tun, mit den oben genannten?

Vielen Dank für jegliche Hinweise.

InformationsquelleAutor michaelmcgurk | 2012-08-27

  1. 1

    Wenn Sie mit jQuery UI, können Sie erreichen dies mit animieren

    $('.box').mouseenter(function(){
  $(this).stop().animate({ backgroundColor: "red" }, 1000);
}).mouseleave(function(){
    $(this).stop().animate({ backgroundColor: "blue" }, 1000);
});

$('.box2').mouseenter(function(){
  $(this).stop().animate({ backgroundColor: "black" }, 1000);
}).mouseleave(function(){
    $(this).stop().animate({ backgroundColor: "blue" }, 1000);
});;

    http://jsfiddle.net/NJe63/1/

    EDIT:

    fügen Sie einfach .children('img').hide() .children('img')show() zu Ende

    $('.box').mouseenter(function(){
  $(this).stop().animate({ backgroundColor: "red" }, 1000).children('img').show();
}).mouseleave(function(){
    $(this).stop().animate({ backgroundColor: "blue" }, 1000).children('img').hide();
});

$('.box2').mouseenter(function(){
  $(this).stop().animate({ backgroundColor: "black" }, 1000).children('img').show();
}).mouseleave(function(){
    $(this).stop().animate({ backgroundColor: "blue" }, 1000).children('img').hide();
});;

    http://jsfiddle.net/NJe63/2/

    Können Sie fadeIn,fadeOut für das Bild

    $('.box').mouseenter(function() {
    $(this).children('img').stop(true,true).fadeIn(1000);
}).mouseleave(function() {
    $(this).children('img').stop(true,true).fadeOut(1000);
});

$('.box2').mouseenter(function() {
    $(this).children('img').stop(true,true).fadeIn(1000);

}).mouseleave(function() {
    $(this).children('img').stop(true,true).fadeOut(1000);
});

    http://jsfiddle.net/NJe63/3/

    Können Sie die Deckkraft, verblassen in und aus dem Bild.. aber da das google-logo ist innen, wie ein Kind-element wird es fadein/fadeout.

    http://jsfiddle.net/NJe63/5/

    Perfekt!!! Aus Interesse, wenn ich das ändern .box von mouseenter - bgimage / mouseleave - no bgimage, wie könnte ich dies tun? Also statt der Farben, versuchen Sie, ein bg-image?
    oh... nur ein Bild.. lassen Sie mich sehen,
    Ich danke Euch so sehr für all Eure Hilfe hier. Ja, im Grunde wollen, um zu versuchen, fade in/out-bg-image - hinter die vorhandenen google-logo ein - also im Grunde nur ersetzt die Farbe, die Wirkung mit 1 Bild.
    Ich fügte hinzu, nur mit dem Bild fadein/fadeout-Funktion.
    Danke, wirey. Ich glaube, ich habe zu erklären, ein wenig besser. Können Sie halten einen moment, während ich re-Satz? 🙂

    InformationsquelleAutor ᾠῗᵲᄐᶌ

  2. 0

    Es ist nicht möglich, fade-in oder out-ein hintergrund Bild andere als mit css3, was nicht unterstützt oldIE. Die einzige Lösung wäre buchstäblich platzieren Sie Bilder hinter ein transparentes div " und " fade in-und out-die Bilder (oder divs mit Bild-hintergrund).

    Hoppla. Ich vielleicht nicht erklären. Ich will nicht zu verblassen in/out ein hintergrund Bild - nur die hintergrund-Farbe. Ist das möglich mit jQuery?
    Ich glaube, Sie können die jQuery-UI. Siehe: jqueryui.com/demos/animate
    Nicht, wenn ein Bild eingebunden ist. Sie können übergang von einer hintergrund-Farbe zu einer anderen, obwohl die Verwendung von jQuery UI wenn ich mich Recht erinnere.

    InformationsquelleAutor Kevin B

Schreibe einen Kommentar