jQuery slideUp 和 slideDown 正在提供弹跳效果

Question

好的，所以我正在尝试使用 jQuery 中的 slideUp 和 slideDown 在图像上创建上滑效果，我实际上实现了这一点，但是每当您将鼠标悬停在 div/图像的某些区域时，效果就会变得跳跃/有弹性。我将在下面发布 html、css 和 js 代码 sn-ps。我不得不使用一种不太有效的方式来定位每个 div，因为我在使用事件对象定位它们时遇到了问题。

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

// Adding slide up effect on 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);
});

Answer 1

您可以简单地使用悬停功能而不是鼠标悬停和鼠标移出 官方文档：https://api.jquery.com/hover/ 这是示例代码

// Adding slide up effect on blog divs

// first 
$(".first").hover(function() {
    $(".firstSlide").slideDown(250);
},function() {
    $(".firstSlide").slideUp(250);
});


// second
$(".second").hover(function() {
    $(".secondSlide").slideDown(250);
},function() {
    $(".secondSlide").slideUp(250);
});


// third
$(".third").hover(function() {
    $(".thirdSlide").slideDown(250);
},function() {
    $(".thirdSlide").slideUp(250);
});

.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;
}
.first .second .third {
  z-index:10000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 -->