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

你想确保打电话给＆＃34; .stop（）＆＃34;在要停止当前动画的元素上，这将使动画不会过度排队。

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的位置时会出现问题

1 个答案: