CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Robert Prine
Robert Prine

Reputation: 2753

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

Upvotes: 2

Views: 1003

Answers (2)

Ned Hulton
Ned Hulton

Reputation: 678

You can use jQuery "eq" selector. 

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

Hovering over the first "port" will animate the first "slide".

Upvotes: 2

DaniP
DaniP

Reputation: 38252

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>

Upvotes: 2

Related Questions