jQueryのフォーマット方法

Question

この素晴らしいフォーラムを使用して、別の要素のホバー上に背景イメージを設定することができました。私がjQueryとjavascriptを初めて使用しているので、私はホバーに追加の効果を追加するように書式を設定するのに苦労しています。例えば私はちょうどバックグラウンドイメージに追加を使用したいと思っていません。私はバックグラウンドサイズを実行したい：カバー;追加とトランジション：すべて0.33秒です。これを現在の構文にどのように追加すればよいですか？

$(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：NOEL

から次のHELPは今、これは私のSCSSコードである移行に問題がよりよい解決策かもしれカスタムクラスを使用して追加しました。

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; 
} 

Answer 1

遷移CSS3プロパティの詳細については

。これには2つのことが必要です：（1）CSSルールを定義する。 （2）ホバーでこれを削除して追加します。

以下は、この動作を示すサンプルコードです。お役に立てれば！

$('.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>

Answer 2

こんにちはあなたは

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

Answer 3

、以下のように多くのスタイルを追加することができ、あなたがたときにホバー推移を表示したい画像のためのCSS3のトランジションプロパティを追加する必要がまず第一。次に、背景サイズのカバーを設定するために、ホバーにCSSを追加する必要があります。あなたはちょうどあなたがボタンのホバーにあなたの体に追加できるCSSクラス内のすべてを置くことができw3shools