CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JasonP
JasonP

Reputation: 13

JQuery: Easier way to make this selection?

I have 9 'card' divs, each card has an hr tag with a '.card-border' class, which sets border-top to 5px and width to 60%. I want the width of the '.card-border' div to animate to 100% when '.card' is hovered, and it should revert to 60% width on mouseleave. Since there are 9 '.card' divs, I need to make sure that only the hovered '.card-border' expands. I know that I can do this by assigning IDs and selecting them each individually in my JavaScript, but I am hoping there is a simpler way to do this to avoid all of the repetitive code. Below is what I have so far, albeit using ID selectors, which I am trying to get away from. 

<div id="family-card" class="card border-0">
  <hr id="family-border" class="card-border">
  <div class="card-block">
    <h5 class="card-title">Family Law</h5>
    <p class="card-text">***** is a full service Family Law Firm.</p>
    <a class="card-link move-right" href="./practice-areas/family-law.html">Learn more »</a>
  </div>
</div>


$('#family-card').mouseenter(function(){
    $('#family-border').animate({
        width: "100%"
    });
}).mouseleave(function(){
    $('#family-border').animate({
        width: "60%"
    });
});
}

I tried selecting the card class and then the firstChild, first(hr), etc. but it still affects the width of the whole card. below is an example of one of my failed attempts:

$('.card').mouseenter(function(){
    $(this).first.animate({
        width: "100%"
    });
}).mouseleave(function(){
    $(this).first.animate({
        width: "60%"
    });
});
}

Thank you in advanced for all your help!

Upvotes: 0

Views: 76

Answers (2)

VilleKoo
VilleKoo

Reputation: 2854

You don't need jQuery for something like this. Plain CSS is enough

.card-border {
  width: 60%;
  transition: width .3s
}

.card:hover .card-border {
  width: 100%;
}
<div id="family-card" class="card border-0">
  <hr id="family-border" class="card-border">
  <div class="card-block">
    <h5 class="card-title">Family Law</h5>
    <p class="card-text">***** is a full service Family Law Firm.</p>
    <a class="card-link move-right" href="./practice-areas/family-law.html">Learn more »</a>
  </div>
</div>

<div id="family-card" class="card border-0">
  <hr id="family-border" class="card-border">
  <div class="card-block">
    <h5 class="card-title">Family Law</h5>
    <p class="card-text">***** is a full service Family Law Firm.</p>
    <a class="card-link move-right" href="./practice-areas/family-law.html">Learn more »</a>
  </div>
</div>

Upvotes: 2

Luicy
Luicy

Reputation: 33

Using .find(..), defined in JQuery 1.0, will search for the entered element and then apply any and all functions declared. So basically, using: $(this).find("#family-border"), will select the first #family-border declared in this, and then apply the animation.

$('#family-card').mouseenter(function(){
    $(this).find('#family-border').animate({
        width: "100%"
    });
}).mouseleave(function(){
    $(this).find('#family-border').animate({
        width: "60%"
    });
});
#family-border {
width: 60%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="family-card" class="card border-0">
  <hr id="family-border" class="card-border">
  <div class="card-block">
    <h5 class="card-title">Family Law</h5>
    <p class="card-text">***** is a full service Family Law Firm.</p>
    <a class="card-link move-right" href="./practice-areas/family-law.html">Learn more »</a>
  </div>
</div>
<div id="family-card" class="card border-1">
  <hr id="family-border" class="card-border">
  <div class="card-block">
    <h5 class="card-title">Family Law</h5>
    <p class="card-text">***** is a full service Family Law Firm.</p>
    <a class="card-link move-right" href="./practice-areas/family-law.html">Learn more »</a>
  </div>
</div>

Documentation: https://api.jquery.com/find/

Upvotes: -1

Related Questions