Question

以下是代码：

<style>
#box1, #box2, .container { position: absolute; top: 0px;z-index:10; height: 50px; }
#box1 { background-color: #ff0000; width: 100px; left: 200px; }
.container { width: 640px; overflow: hidden; height: 50px; background-color:#000; color:#FFF; }
</style>


<div class="container">
<div id="box1"></div>
</div>

<script>
var animateMe = function(targetElement, speed){
    var position = $(targetElement).position();
    var positionA = $(targetElement).position();
    if(positionA.left = '400px'){
        $(targetElement).fadeIn(1000).css({left:'200px'});
    };
    //animate
    $(targetElement).animate(
        {
        'left': '400px'
        },
        {
        duration: speed,
        complete: function(){
            animateMe(this, speed);
            }
        }
    ).fadeOut(1000);
};

$('.container').hover(function(){
    animateMe($('#box1'), 2000);
},
function(){
    $('#box1').stop();
});
</script>

我想要的是悬停时：

fadesIn
动画到右边
FadesOut（当fadeOut完成重置左侧位置时）
然后再次重复到1号。

但我的代码是重置postition然后fadesOut，fadesIn ...

Answer 1

我在http://jsfiddle.net/SdS68/

创建了jsfiddle

var animateMe = function(targetElement, speed){
    $(targetElement).css({ left: '200px' }).fadeIn(1000, function() {
        $(targetElement).animate({
            'left': '400px'
        }, {
            duration: speed,
            complete: function() {
                $(this).fadeOut(1000, function() {
                    animateMe(this, speed);
                })
            }
        }).fadeOut(1000);
    });
};

Answer 2

您可以使用回调函数来延迟某些代码的执行，直到其他代码完成运行：

$(targetElement).animate({ 'left' : '400px' }, {
    duration : speed,
    complete : function () {
        var that = this;
        $(that).fadeOut(1000, function () {
            animateMe(that, speed);
        });
    }
});

同样if (positionA.left = '400px)将始终返回true，因为您没有使用条件运算符，代码应该是：if (positionA.left == '400px)（或者您可以使用===匹配类型和值）。< / p>

jQuery在fadeOut完成后添加一个类

2 个答案: