私はアニメーションを追加しようとしているのimgとテキスト

Question

間のフリップ私は私の写真の上に置くと、そう、彼らはフェードアウトし、テキストを別のdivをフェードインちょうどこのページのように：。http://jack-hughes.com/

しかし、私は私を持っています"col-md-4"のクラスを持つブートストラップコンテナ内のピクチャと、写真の1つがフェードアウトするたびに、他のものがその場所に移動します。

私は例のウェブサイトのように何かできますか？

これはこれまで私が行ってきたことですが、それは近くではありません。

$(".box-1").on('mouseover', function() { 
    $(this).fadeToggle(300).addClass('back'); 
}); 

Answer 1

hoverを試しましたか？マウスインとマウスアウトイベントの両方を処理します。

周囲のdivに各画像をテキストで折り返してこのdivにhover関数を使用することができます。また、画像/テキストコンボごとに同じクラスを使用すると、jQueryは非常に簡単です。

HTML

<div id="about" class="container-fluid"> 
<div class="header"> 
    About 
</div> 
<div class= "row front"> 
    <div class="col-sm-4 about-box-container"> 
    <img class="about-box front box-1" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
    <div class="about-box back box-1"> 
     text 
    </div> 
    </div> 
    <div class="col-sm-4 about-box-container"> 
    <img class="about-box front box-2" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
    <div class="about-box back box-2"> 
     text 
    </div> 
    </div> 
    <div class="col-sm-4 about-box-container"> 
    <img class="about-box front box-3" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
    <div class="about-box back box-3"> 
     text 
    </div> 
    </div> 
</div> 

jQueryの

$('.about-box-container').hover(
function() { 
    $(this).find('.front').fadeOut(300, function() { 
    $(this).siblings('.back').fadeIn(300); 
    }); 
}, 
function() { 
    $(this).find('.back').fadeOut(300, function() { 
    $(this).siblings('.front').fadeIn(300); 
    }); 
} 

）

Demo here

Answer 2

jQueryのフェードエフェクト設定要素のDISプロパティを 'none'に再生し、その場所を他の要素に使用することができます。 不透明とを使用してみてください：

CSS：

ここ

.test { 
    position: relative; 
} 

.test img { 
    width: 100px; 
    height: 100px; 
    border: solid 1px lightgray; 
    padding: 10px; 
} 

.test .test2 { 
    width: 102px; 
    height: 102px; 
    padding: 10px; 
    display: flex; 
    text-align: center; 
    align-items: center; 
    justify-content: center; 
    background: lightgray; 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0; 
    transition: all 0.3s ease-out; 
} 
.test .test2:hover { 
    opacity: 1; 
} 

が更新plunker @ Tricky12のHTMLに基づいています（実際には、これはhttp://jack-hughes.comで行われているものである）任意のJSせずにを合わせるhttps://plnkr.co/edit/pGYckIcRDPZKS7Ma4vSQ?p=previewを