jQuery

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 );}

jQuery | Animate() 在改变 DIV 的位置时出现问题

jQuery | Animate() issues in changing position of DIV

css

css-position

jquery-animate