Hinzufügen eines fade-in-und out-übergang zum hintergrund Bild auf hover

Habe ich eine einfache navigation in einer Seitenleiste auf einer Seite, die Sie sehen können hier.

Wie Sie sehen können, wenn Sie den Mauszeiger über einen der links in der sidebar das hintergrund Bild ändert sich, wie ich, haben einen anderen hintergrund-URL für den hover in der CSS. Ich bin auf der Suche nach einer einfachen Möglichkeit, das hinzufügen eines übergangseffekts, so dass der hover-hintergrund-Bild ein-und ausgeblendet. Ich habe versucht, ein paar von jQuery-Methoden ohne Erfolg. Ich Frage mich, ob es einen Weg gibt Sie einen fade-übergang mit Hilfe von jQuery oder eine andere Methode, um die URL-hintergrund Bild, oder ob ich eine andere Methode verwenden, um einen übergangseffekt.

Dank,

Nick

bitte fügen Sie den code, den Sie versucht haben, mit in die Frage. Verwenden Sie die jquery-Ereignis auf die Maus immer aus und erreichen Ihre Wirkung
Sind Sie auf der Suche ein Beispiel wie dieses. designworks.com.pk/Beispiel/hintergrund

InformationsquelleAutor Nick | 2011-07-30

3

Es ist schwer zu sagen, was Sie zu tun versuchen, ohne eine Klarstellung, oder einige Beispiel-code, jedoch sind Sie auf der Suche nach so etwas wie dieses?
```
$("#someElement").hover(function() {
    $(this).stop().fadeOut("1000", function() {
       $(this).attr("src", "anotherImage.png").fadeIn(1000);
    }); 
}, function() {
    $(this).stop().fadeOut("1000", function() {
       $(this).attr("src", "firstImage.png").fadeIn(1000);
    }); 
});
```
In diesem Beispiel #someElement bezieht sich auf eine img element. Die src - Attribut geändert wird auf schweben, mit einem fade-Effekt.

Bearbeiten - unter re-Lesen Sie Ihre Frage, ich denke Sie ändern möchten background-image CSS-Eigenschaft, sondern als die src einer img element. Wenn das der Fall ist, haben Sie einen Blick auf dieses Beispiel. All das hat sich wirklich verändert, ist das ersetzen der jQuery attr Funktion mit css.
- Danke, ja, es ist die background-image-Eigenschaft, die ich bin versucht zu ändern. Ich brauche keine ein-und ausblenden der Haupt-hintergrund-Bild als hover-hintergrund-Bild ist im wesentlichen die gleiche wie die Haupt-hintergrund-Bild mit nur einem Pfeil Hinzugefügt, auf der rechten Seite. Also vermutlich kann ich den code ändern, von der Geige, die Sie im Zusammenhang mit so, dass nur der hover-hintergrund-Bild ein-und ausgeblendet?
- Danke. Ich sehe dein code funktioniert gut für fading ein hintergrund-Bild hin-und zurück, was meine Frage war, so habe ich markiert Eure Antwort als korrekt. Ich bin auch auf der Suche nach einer etwas anderen Lösung aber nur für fading in einem hintergrund-Bild auf schweben, die scheinen würde, hinter dem Vordergrund-Bild in das DIV, aber ich werde Sie bitten, eine separate Frage zu diesem.
InformationsquelleAutor James Allardice

Verwenden Sie die folgenden codes:

<div id="someElement" style="background:url('2.jpg');width:100px;height:100px;">
</div>
     $(document).ready(function(){ 
        $("#someElement").hover(function() {
            $(this).stop().fadeOut("1000", function() {
                $(this).css("background", "url('1.jpg')").fadeIn(1000);
            });
        }, function() {
            $(this).stop().fadeOut("1000", function() {
                $(this).css("background", "url('2.jpg')").fadeIn(1000);
            });
        });
    });

Danke. Da der hover-hintergrund-Bild ist die gleiche wie die Haupt-hintergrund Bild, mit nur einem Pfeil Hinzugefügt, um das Recht, ich brauche keine ein-und ausblenden der Haupt-hintergrund-Bild, nur eine einfache fading in der hover-hintergrund-Bild auf hover-und ausblenden, wenn Sie der cursor verlässt das div

InformationsquelleAutor Manikandan Thangaraj

HTML

Dies ist das HTML-element, das das Bild im hintergrund:

<div class="image"></div>

CSS

Definieren wir zwei CSS-Klassen. Die Voreinstellung für das element enthält image1.jpg und eine zweite Klasse, die enthält image2.jpg:

.image {
    width: 1000px; /* Image width */
    height: 500px; /* Image height */
    background: url('../images/image1.jpg') no-repeat; /* First image */
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "../images/image1.jpg", sizingMethod = 'scale');
    background-size: 100% 100%;
    background-position: center;
}
.image.image-2 {
    background: url('../images/image2.jpg') no-repeat;  /* Second image */
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "../images/image2.jpg", sizingMethod = 'scale');
    background-size: 100% 100%;
    background-position: center;
}

JavaScript

JavaScript verwendet Rückrufe/Versprechen um sicherzustellen, dass jeder übergang passiert, in der richtigen Reihenfolge:

var elem = $('.image'); //Define the element
elem.hover(toggleImage); //When hovering over the element, run the toggleImage function

function toggleImage() {
    //Fade out 0.5 secs, toggle image class, fade in 0.5 secs
    elem.fadeOut(500, function(){
        elem.toggleClass('image-2').promise().done(function(){
            elem.fadeIn(500);
        });
    })
}

InformationsquelleAutor Jasdeep Khalsa

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.