Hey there! I've been working on a cool slide up effect for an image using jQuery's slideUp and slideDown functions. It's working well, but I've noticed that when you hover over certain areas of the div/image, the effect becomes jumpy or bouncy. Below are snippets of the HTML, CSS, and JS code. I had to get creative with targeting each div due to some issues with event objects.
HTML
<div class="blog">
<h1>Our Blog</h1>
<ul class="blog__list">
<li class="blog__item first">
<div class="blog__item--heading">
<h4>Travel</h4>
<h3>Far far away, behind the word mountains</h3>
<p>Wellie Clark</p>
</div> <!-- .blog__item-heading end -->
<div class="firstSlide"></div>
</li>
<li class="blog__item second">
<div class="blog__item--heading">
<h4>Travel</h4>
<h3>Far far away, behind the word mountains</h3>
<p>Wellie Clark</p>
</div> <!-- .blog__item-heading end -->
<div class="secondSlide"></div>
</li>
<li class="blog__item third">
<div class="blog__item--heading">
<h4>Travel</h4>
<h3>Far far away, behind the word mountains</h3>
<p>Wellie Clark</p>
</div> <!-- .blog__item-heading end -->
<div class="thirdSlide"></div>
</li>
</ul> <!-- .blog__list end -->
</div> <!-- .blog end -->
CSS
.blog {
background-color: #F1F1F1;
padding: .1rem;
}
.blog h1 {
text-align: center;
font-size: 3.2rem;
margin: 11rem auto 9rem;
}
.blog__list {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 12rem;
}
.blog__item {
background: linear-gradient(rgba(5, 5, 5, .5), rgba(5, 5, 5, .5)),
url("../img/drinkingCoffee.png");
background-size: cover;
width: 35rem;
height: 48rem;
margin: 0 1.7rem;
transition: all .3s;
position: relative;
}
.blog__item:hover h3, .blog__item:hover h4, .blog__item:hover p {
color: black;
}
.blog__item:hover {
cursor: pointer;
}
.blog__item--heading {
position: absolute;
bottom: 0;
color: white;
z-index: 10;
}
.blog__item--heading h4 {
margin-left: 2rem;
font-size: 1.3rem;
color: lightgray;
margin-bottom: 0;
}
.blog__item--heading h3 {
margin: .8rem 0 0 2rem;
font-size: 2.2rem;
}
.blog__item--heading p {
margin: 1.2rem 0 3rem 2rem;
color: lightgray;
font-size: 1.3rem;
}
.firstSlide {
background-color: white;
height: 17rem;
width: 35rem;
position: absolute;
bottom: 0;
display: none;
}
.secondSlide {
background-color: white;
height: 17rem;
width: 35rem;
position: absolute;
bottom: 0;
display: none;
}
.thirdSlide {
background-color: white;
height: 17rem;
width: 35rem;
position: absolute;
bottom: 0;
display: none;
}
JS
// Creating slide up effect for blog divs
// first
$(".first").on("mouseover", () => {
$(".firstSlide").slideDown(250);
});
$(".first").on("mouseout", (evt) => {
$(".firstSlide").slideUp(250);
});
// second
$(".second").on("mouseover", () => {
$(".secondSlide").slideDown(250);
});
$(".second").on("mouseout", (evt) => {
$(".secondSlide").slideUp(250);
});
// third
$(".third").on("mouseover", () => {
$(".thirdSlide").slideDown(250);
});
$(".third").on("mouseout", (evt) => {
$(".thirdSlide").slideUp(250);
});