Robert Prine Robert Prine - 5 months ago 42
CSS Question

Animating Multiple Divs

The following code works, but I have a problem since I want to have multiple portfolio objects like this one. If I use the current code it would raise all of the hidden divs (.slide) with text instead of one at a time based on hover. I can't use "this" since that would just make the picture animate upward. I could give everything ids and write a lot of JavaScript code that is repetitive, but I am almost positive that isn't the best way to do things.

Basically, How would you target a div with a hover effect that causes another div to do something and still be able to reuse the code?

The HTML for this section:

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


The CSS for this section:

.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;
}


The JavaScript for this section:

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

Of course you can use this, not to animate the element itself but to refer another "closest" element based on that:

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

Demo Snippet

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

Comments