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

Posted 2023-03-06

【中文标题】jQuery slideUp 和 slideDown 正在提供弹跳效果

【英文标题】：jQuery slideUp and slideDown is giving a bouncing effect

【发布时间】：2019-05-27 20:04:45

【问题描述】：

好的，所以我正在尝试使用 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);
);

【问题讨论】：

你想用firstSlide做什么似乎没有数据，它的绝对定位。

【参考方案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 -->