jQueryで背景画像を「クリック」する方法は？

Question

背景のアニメーション効果を作ろうとしていますが、クリックすると画像が変化するようなイベントを聴くべきです。 たとえば、Sajo Hapyoをクリックすると、背景イメージが変更されます。 主な問題は、すべての画像が異なる背景画像を持つことになり、私は本当にこれに固執しています。

それが動作するかどうか、チェックしたいので、私は、テストのために私のJSでbackgroundColor: greenを使用。

最終バージョンでは、背景画像が追加され、すばらしいjqueryのUI（効果）でクリックすると変更されるはずです。ここで

スクリーンショット

です。ここ

を私を助けてください私のコード

HTML

<section id="main-showcase"> 
    <div class="showcase-wrapper"> 
     <div class="left-main col-lg-3 col-md-3"> 
      <div class="shadow-effect"><p class="ottogi">OTTOGI</p></div> 
      <div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div> 
      <div class="shadow-effect"><p class="natura">Natura Bogata</p></div> 
      <div class="shadow-effect"><p class="maloo">ТОО Малу</p></div> 
      <div class="shadow-effect"><p class="dongush">Dongsuh</p></div> 
      <div class="shadow-effect"><p class="may">ООО Май</p></div> 
     </div> 
     <div class="right-main col-lg-9 col-md-9"> 
      <div class="inner-container"> 
       <h1>Ottogi</h1> 
       <h2>Южно - Корейские продукты питания высочайшего качества!</h2> 
      </div> 
      <div class="box-container"> 
       <div class="main-wrap"> 
        <div id="main-slider" class="first-slider"> 
         [[getImageList? 
          &tvname=`goods` 
          &tpl=`goodsSlider.tpl` 
         ]] 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

JS

です

$('button.sajo').click(function() { 
    $('.right-main').animate({ 
     backgroundColor: 'green', 
    }, 1500); 
}); 

Answer 1

のように使用することができます（）。同じ要素のクラスを単に切り替えることができます。 animate（）を避け、代わりにcss3アニメーションを使用することをお勧めします。

codepen

ここcodepenサンプルを確認してください。それを使用する方法について説明します。キーフレームとすべてを使用する代わりに。 trnasitionを使って簡単に入手できます。

span { 
    background-color: red; 
    padding: 10px; 
    transition: all 1.5s ease; 
    color: white; 
} 
.change-color { 
    background-color: blue; 
} 

Answer 2

.bgcolor{ 
    animation: colorchange 50s; /* animation-name followed by duration in seconds */ 
    /* you could also use milliseconds (ms) or something like 2.5s */ 
    -webkit-animation: colorchange 50s; /* Chrome and Safari */ 
} 

@keyframes colorchange 
{ 
    100% {background: green;} 
} 

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */ 
{ 
    100% {background: green;} 
}` 

次にあなたがの背景変更したい要素に、このクラスを追加します。

$('button.sajo').click(function() { 
    $('.right-main').addClass('bgcolor'); 
}); 

Answer 3

すべてのまず、私はHTMLで使用すると、clickイベントリスナーを適用ボタンを見ることができません。しかし、私はこのボタンがあなたのHTMLコードのどこかにあると仮定し、あなたがしたいことは、メインスライダ上の背景画像をクリックすることによって変更することです。あなたが欲しいの正確なアニメーションを指定していないので、私はちょうど不透明度はあなたが0から1に行くアニメーションでフェードと例を提供したことを

$('button.sajo').click(function() { 
    $('.right-main').animate({opacity: 0}, 'slow', function() { 
     $(this) 
     .css({'background-image': 'url(your_url)'}) //Change url to your image url 
     .animate({opacity: 1}); 
    } 
}); 

注：これを実行するには、単に以下を行う必要があります.animate()の内容を変更し、.css()のままにしてこのアニメーションを別のものに変更することができます。お役に立てれば！

Answer 4

あなたはjQuery.animateを使用するのではなく、実際にその

var imageUrl = your image url 
$('button.sajo').click(function() { 
    $('.right-main').css('background-image', 'url(' + imageUrl + ')'); 
});