的jQuery的CSS過渡，有的時候它不工作

Question

這裏舉例：

http://jsfiddle.net/gL38G/

$(function() { 

    $(document.body).on('click', '.testA', function() { 
     $('.partA').show().css('left', '200px'); 
    }) 
     .on('click', '.testB', function() { 
     $('.partB').show(); 
     window.setTimeout(function() { 
      $('.partB').css('left', '200px'); 
     }, 50); 
    }) 
     .on('click', '.reset', function() { 
     $('div[class*=part]').css('left', 0).hide(); 
    }); 
}); 

所以我要補充的延遲做一些其他過渡。

有沒有一個很好的方法來解決這個問題？

我如何知道轉換結束了，我喜歡使用像jquery動畫完整事件的轉換。

Answer 1

而不是使用setTimeout的使用delay()

的語法是這樣的

$('.partB').show().delay(50).css('left', '200px');

或者，如果你希望在節目事件結束後看看文檔show()它開火它接受一個「完整的」回調參數。

在這種情況下，你可以使用

$('.partB').show(0, function() { 
    $('.partb').css('left', '200px'); 
}); 

其中0是持續時間和功能參數是「完整」的回調。