JQueryの背景トランジション

Question

私は単純なjqueryコードを持っています。アイコンをクリックすると、次のようなコードで背景画像が変わります。

$('div').css({'background-image':'url()'}); 

どのようにしてアニメーションを使用できますか？私はGoogleを検索しましたが、本当に私を助けるものは見つかりませんでした。

Answer 1

フェードインしたい場合は、jqueryとCSSで行うことができます。私は動的な状況で使用することができる方法でそれをやっただけで、jqueryの背景イメージを変更しなければならず、すべてを行います。また、CSSの時間を変更することもできます。

HTML：

<div class="test"> 

CSS：

.test { 
    /* as default, we set a background-image , but it is not nessesary */ 
    background-image: url(http://lorempixel.com/400/200); 
    width: 200px; 
    height: 200px; 
    /* we set transition to 'all' properies - but you can use it just for background image either - by default the time is set to 1 second, you can change it yourself*/ 
    transition: linear all 1s; 
    /* if you don't use delay , background will disapear and transition will start from a white background - you have to set the transition-delay the same as transition time OR more , so there won't be any problems */ 
    -webkit-transition-delay: 1s;/* Safari */ 
    transition-delay: 1s; 
} 

JS：

$('.test').click(function() { 
    //you can use all properties : background-color - background-image ... 
    $(this).css({ 
    'background-image': 'url(http://lorempixel.com/400/200)' 
    }); 
}); 

背景画像にはないので、私は、これはjQueryのアニメーション機能を使用して行うことができるとは思いませんこのようなフェーディングを行うために必要なCSSプロパティを持っています。 jQueryは、ブラウザが可能にするものだけを利用できます。

また、背景画像の位置をアニメーション方法として試すこともできます。 https://snook.ca/archives/javascript/jquery-bg-image-animations

デモ：https://snook.ca/technical/jquery-bg/

Answer 2

$("div").css({'background-image': 'url(http://lorempixel.com/400/200)'}).animate({height: '300px', opacity: '0.4'}, "slow").animate({width: '300px', opacity: '0.8'}, "slow"); 

これは、いくつかのjqueryのメソッドチェーンです。