jquery クリック イベントでいくつかの問題が発生しており、助けが必要です。
プラス記号の付いた画像があります。ユーザーがこのプラス記号をクリックすると、背景のテキスト div がフェードインします。テキスト div には十字があります。したがって、ユーザーが十字をクリックすると、テキスト div がフェードアウトし、画像がフェードインします。
ページにはこれらのボックスがいくつかありますが、コードの問題は、すべての div でフェード アクションをトリガーすることです。一度クリックしただけではありません。
ここに私のHTMLがあります。ポートフォリオ ブロックを作成するために、私のページにはこれらが複数あります。
<a class="flip-container">
<div class="flip-container">
<div class="flipper">
<div class="front">
<div class="plus"></div>
<img src="img/portfolio.jpg" alt="Animation">
<h3>Project name</h3>
</div>
<div class="back">
<div class="cross"></div>
<p>Some text goes here.</p>
<p>by persons name</p>
</div>
</div>
</div>
これが私のjQueryです:
$('.back').hide();
$('.flip-container .plus').click(function(e){
$('.front').fadeOut('slow', function(){
$('.back').fadeIn('slow');
});
});
$('.flip-container .cross').click(function(e){
$('.back').fadeOut('slow', function(){
$('.front').fadeIn('slow');
});
});