Question

我有以下 HTML

<div id="mrdiv"/>
<input type="button" style="position: absolute;top: 100px;"onclick="one();"></input>
<input type="button" style="position: absolute;top: 100px; left: 50px;" onclick="two();"/>

JAVASCRIPT

function one(){
$("#mrdiv").stop(true).animate({right: "+=214"},200);
}

function two(){
$("#mrdiv").stop(true).animate({left: "+=214"},200);
}

CSS

#mrdiv{
    position:absolute;
    background-color: black;
    width: 100px;
    height: 100px;
}

最后但并非最不重要：http://jsfiddle.net/25pYY/3/ 由于一些奇怪的原因，我无法理解为什么按钮不起作用，但我想代码足以理解我想要的东西。

基本上，当我执行animate函数时，div正确设置动画，但仅限于代码的第一段。有了这个，我的意思是，如果我点击按钮一个，那么两个将无效，反之亦然。我需要他们工作并重复这样做，但我不明白为什么他们不会。关于这个的任何想法？对于破碎的小提琴，我会试着让它在等待时工作！

Answer 1

您的right和left值互相竞争。您需要根据需要禁用它们：

http://jsfiddle.net/isherwood/25pYY/9

function one() {
    $("#mrdiv").stop(true).animate({
        right: "+=14"
    }, 200).css('left', 'auto');
}

function two() {
    $("#mrdiv").stop(true).animate({
        left: "+=14"
    }, 200).css('right', 'auto');
}

将您的点击处理程序从HTML中删除是一个很好的举措，如下所示：

http://jsfiddle.net/isherwood/25pYY/10

$(function () {
    $('#mrdiv input').click(function () {
        if ($(this).index() == 1) {
            one();
        } else {
            two();
        }
    });
});

正如我所怀疑的那样，您实际上想要的行为与您的代码所表明的不同。以下是如何使动画不会跳到屏幕两侧。仅动画一个属性：

http://jsfiddle.net/isherwood/25pYY/12

function one() {
    $("#mrdiv").stop(true).animate({
        left: "-=14"
    }, 200);
}

function two() {
    $("#mrdiv").stop(true).animate({
        left: "+=14"
    }, 200);
}

动画div回到原来的位置（循环需要重复）

1 个答案: