查询 | Animate() 改变 DIV 位置的问题

Question

我正在使用 position:0px; 和 position:-135px; 当有人将鼠标悬停在它上面时上下移动 div。我正在使用 jQuery 为 DIV 设置动画，以便它在 onmouseover 上向上移动并在 onmouseout 上向下移动。

下面是我试过的 jQuery 代码:

function show_slide_preview(id_to_preview){

    id_to_preview = "#" + id_to_preview;

    $(id_to_preview).animate({
        bottom: "0px",
    }, 1000 );
}

function show_slide_unpreview(id_to_preview){

    id_to_preview = "#" + id_to_preview;

    $(id_to_preview).animate({
        bottom: "-135px",
    }, 1000 );
}

下面是HTML示例代码:

<div class="slideshow_option_one_underlay" onmouseout="show_slide_unpreview('slide_1_button_preview');" onmouseover="show_slide_preview('slide_1_button_preview');" onclick="change_slide('slide_1');" id="slide_1_button">

        <img src="images/about_us_slider.png">

        <div class="slideshow_option_one slideshow_options" onclick="change_slide('slide_1')" id="slide_1_button_preview">
            <h3>About Us</h3>
            <p>Find out about our origins and what we can offer your business.</p>
            <a href="javascript:{}">Click Here To Read More</a>
        </div></div>

问题

这确实有效，但是我得到了一个滑稽的结果，因为它们不断地上下弹跳而且不停下来!!下面是它的 GIF 动图。

如何解决这个烦人但有趣的错误？

Answer 1

您要确保在元素上调用“.stop()”以停止当前动画，这将防止动画过度排队。

function show_slide_preview(id_to_preview){

id_to_preview = "#" + id_to_preview;

$(id_to_preview).stop().animate({
    bottom: "0px",
}, 1000 );}

function show_slide_unpreview(id_to_preview){
id_to_preview = "#" + id_to_preview;

$(id_to_preview).stop().animate({
    bottom: "-135px",
}, 1000 );}