複数のアニメーションをアニメ化する

Question

次のコードは機能しますが、このような複数のポートフォリオオブジェクトを作成したいので問題があります。現在のコードを使用すると、隠れているdiv（.slide）が、ホバーに基づいて1つではなくテキストで表示されます。私は "これ"を使用することはできません。それは単に画像をアニメーション化することになります。私はすべてのIDを与えることができ、繰り返しJavaScriptコードの多くを書くが、私は事を行うための最良の方法ではないほぼ肯定的です。

基本的に、他のdivに何かをさせてもコードを再利用できるホバー効果でdivをターゲティングする方法はありますか？

このセクションのHTML：

<div class="col-md-6 high"> 
    <img class="port" src="http://loremflickr.com/320/240" alt="test"> 
    <div class="slide"> 
     <h3>Test Portfolio</h3> 
    </div> 
</div> 

このセクションのためのCSS：

.high { 
    height: 200px; 
    overflow: hidden; 
} 

.port { 
    width: 100%; 
    height: 200px; 
} 

.slide { 
    background-color: rgba(74, 170, 165, 0.7); 
    color: white; 
    position: relative; 
    top: -34px; 
    height: 200px; 
    width: 100%; 
    padding: 20px; 
    text-align: center; 
} 

JavaScriptのこのセクションのため：あなたはthisを使用することができます。もちろん、

$(document).ready(function(){ 

    var portfolio = { 
    // moves div with text over portfolio picture on hover 
    hoverPort: function() { 
     $(".port").hover(function() { 
     $(".slide").stop().animate({"top" : "-110px"}); 
     }, function() { 
     $(".slide").stop().animate({"top" : "-34"}); 
     }); 
    }, // end of hoverPort function 
    } // end of portfolio object 

    portfolio.hoverPort(); 

}); // end of document.ready 

Answer 1

、要素自体をアニメートするのではなく、それに基づいて別の「最も近い」要素を参照するようにします。

$(".port").hover(function() { 
     $(this).next('.slide').stop().animate({"top" : "-110px"}); 
    }, function() { 
     $(this).next('.slide').stop().animate({"top" : "-34"}); 
    }); 

---

デモスニペット

$(".port").hover(function() { 
 
    $(this).next('.slide').stop().animate({ 
 
    "top": "-110px" 
 
    }); 
 
}, function() { 
 
    $(this).next('.slide').stop().animate({ 
 
    "top": "-34" 
 
    }); 
 
});

.col-md-6 { 
 
    float: left; 
 
    width: 50%; 
 
    padding:25px; 
 
    box-sizing:border-box; 
 
} 
 
.slide { 
 
    position: relative; 
 
    top: -60px; 
 
    color: white; 
 
    background: red; 
 
    font-size: 2em; 
 
    font-family: sans-serif; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-6 high"> 
 
    <img class="port" src="http://loremflickr.com/320/240" alt="test"> 
 
    <div class="slide"> 
 
    <h3>Test Portfolio</h3> 
 
    </div> 
 
</div> 
 
<div class="col-md-6 high"> 
 
    <img class="port" src="http://loremflickr.com/320/240" alt="test"> 
 
    <div class="slide"> 
 
    <h3>Test Portfolio</h3> 
 
    </div> 
 
</div>

Answer 2

あなたはjQueryの "EQ" セレクタを使用することができます。

$(".port").eq(0).hover(function() { 
     $(".slide").eq(0).stop().animate({"top" : "-110px"}); 
    }); 

最初の「ポート」にカーソルを合わせると、最初の「スライド」がアニメートされます。