Wie formatiere ich meine jQuery

Ich habe es geschafft, ein Hintergrundbild auf Hover eines anderen Elements mit diesem großen Forum einrichten! Da ich neu bei jQuery und Javascript bin, kämpfe ich um das Hinzufügen zusätzlicher Effekte auf Hover zu formatieren. z.B. Ich möchte nicht nur einen Anhang zum Hintergrundbild verwenden, sondern auch eine Hintergrundgröße: Cover; Anhängen und ein Übergang: alle 0,33s Leichtigkeit. Wie würde ich das zur aktuellen Syntax hinzufügen?Wie formatiere ich meine jQuery

$(document).ready(function() { 

    //Preload 
    $('<img/>').hide().attr('src', '../img/background-experience.jpg').load(function(){ 
     $('body').append($(this)); 
    }); 

    $('.btn').hover(function() { 
     $('body').css('background-image', 'url("../img/background-experience.jpg")'); 
    }, function() { 
     $('body').css('background', ''); 
    }); 
});

EDIT: NACH HILFE VON NOEL

Added benutzerdefinierte Klasse verwendet, die eine bessere Lösung jetzt sein kann Probleme mit dem Übergang mit dieser meiner SCSS Code ist.

body { 
    background: $black; 
    color: $white; 
    font-family: $default-font; 
    font-weight: 600; 
    transition: all 0.33s ease; 
} 

.my-custom-class { 
    background-image:url('https://yt3.ggpht.com/-V92UP8yaNyQ/AAAAAAAAAAI/AAAAAAAAAAA/zOYDMx8Qk3c/s900-c-k-no-mo-rj-c0xffffff/photo.jpg'); 
    background-size:cover; 
}

Quelle

2017-02-27 Sam Ducker

So möchten Sie mehr CSS-Stile hinzuzufügen .. Das ist, was Sie suchen? – SilentCoder

hey Sam - nicht sicher, was hier passiert, aber kannst du eine Geige spielen, damit ich das Übergangsproblem sehen kann, das du hast? – Noel

Sie einfach alles in einer CSS-Klasse setzen kann, die Sie auf Ihren Körper auf schwebt die Schaltfläche hinzufügen können. Dies erfordert zwei Dinge: (1) Definieren der CSS-Regel; dann (2) hinzufügen, entfernen Sie dies bei Hover.

Unten ist ein Beispielcode, um dies in Aktion zu zeigen. Hoffe das hilft!

$('.btn').hover(function() { 
 
     $('body').addClass('my-custom-class'); 
 
    }, function() { 
 
     $('body').removeClass('my-custom-class'); 
 
    });

.my-custom-class { 
 
    background-image:url('https://yt3.ggpht.com/-V92UP8yaNyQ/AAAAAAAAAAI/AAAAAAAAAAA/zOYDMx8Qk3c/s900-c-k-no-mo-rj-c0xffffff/photo.jpg'); 
 
    
 
    background-size:cover; 
 
} 
 

 
body { 
 
    background-image:url('https://www.petdrugsonline.co.uk/images/page-headers/cats-master-header'); 
 
    background-size:cover; 
 
transition: all 0.33s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn">My button</button>

Quelle

2017-02-27 06:24:57 Noel

Fantastische Antwort Noel, danke für die Hilfe !! –

toll, dass @SamDucker geholfen hat. Es würde sehr geschätzt werden, wenn Sie meine Antwort akzeptieren könnten? Ich brauche die Punkte haha – Noel

Aus welchen Gründen auch immer wird der Übergang nicht funktionieren. Ich habe den css-Code hinzugefügt, um den ursprünglichen Beitrag und ich werde tun :) –

Hallo können Sie mehr Arten, wie unten hinzufügen,

$('body').css({'background-image':'url("../img/background-experience.jpg")','transition':'all 0.33s ease','background-size':'cover'});

Quelle

2017-02-27 06:12:59 SilentCoder

Hallo Ich habe das versucht, hat nicht traurig gearbeitet. Dann habe ich das geändert, was auch nicht funktioniert hat. Das einzige Beispiel, wo es irgendwas macht, ist der ursprüngliche Post, der nicht in den zwei Edits ist, die wir gerade mit $ ('body') gefunden haben. Css ({'background-image: url ("../ img/background-experience .jpg ")", "Übergang: alle 0,33s Leichtigkeit", "Hintergrundgröße: Cover"}); –

allererst Sie css3 Übergang Eigenschaft für das Bild, das Sie wollen zeigen, Übergang, wenn Hover hinzufügen müssen. Dann müssen Sie CSS bei Hover hinzufügen, um die Hintergrundgröße zu ändern.

Weitere Informationen zum Übergang css3 Eigenschaft w3shools

Quelle

2017-02-27 06:19:23

Wie formatiere ich meine jQuery

Antwort

Verwandte Themen