動畫多重分隔

下面的代碼有效，但我有一個問題，因爲我想擁有像這樣的多個組合對象。如果我使用當前的代碼，它會根據懸停提高所有隱藏的div（.slide）與文本，而不是一次。我不能使用「這個」，因爲那隻會使圖片變得生動起來。我可以提供一切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本節：

$(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

來源

2016-06-13 Robert Prine

考慮改寫您的問題和標題以刪除「最佳實踐」部分。最佳實踐受到意見的影響，並且可能會根據大量假設而有所不同，因此在Stack Overflow上不太受歡迎;事實上，有一個偏離主題的理由「**主要是基於意見的**」，它的內容是：「許多好的問題根據專家的經驗產生一定程度的意見，但對這個問題的回答往往幾乎完全基於意見，而不是事實，參考或具體的專業知識。「*。如果你將問題縮小到「基本」，那就沒問題。 –

完成。謝謝你讓我知道。 :) –

當然你可以使用this中，不要爲元素本身設置動畫效果，而應根據以下內容引用另一個「最接近」的元素：

$(".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>

來源

2016-06-13 21:37:05 DaniP

謝謝！我對編碼相當陌生，但還沒有聽說過這種方法！：D –

您可以使用jQuery的「EQ」選擇。

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

將鼠標懸停在第一個「端口」上將爲第一個「幻燈片」設置動畫。

來源

2016-06-14 00:19:01

謝謝，內德。這是我還沒有看到的另一種偉大的方式！ –

動畫多重分隔

回答

相關問題