jQuery的淡出之後添加一類完全地做

fadesIn
動畫向右

：

<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>

我想要當懸停是

FadesOut（當fadeOut重置左邊位置時）

然後再次重複在編號爲1

但我的代碼，它然後復位postition fadesOut，fadesIn ...

來源

2012-03-01 test

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

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

來源

2012-03-01 18:46:50 arunes

THX創建的jsfiddle工作完全正常。這兩個答案的作品，但賈斯珀的代碼時，鼠標框仍然可見不會消失，所以你很好。 – test 2012-03-01 18:56:40

可以使用回調函數來延遲的一些代碼執行，直到其他代碼運行完成後：

$(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) （或者您可以使用===來匹配類型和值）。

來源

2012-03-01 18:42:24 Jasper

jQuery的淡出之後添加一類完全地做

回答

相關問題