Hoạt ảnh jQuery slideLeft mà không cần gói văn bản

Question

Tôi muốn hiển thị/ẩn một đoạn văn bản bằng cách sử dụng jQuery từ trái sang phải.

Tôi đang sử dụng

$('#text').animate({ 
    width: ['toggle', 'swing'] 
}); 

Tuy nhiên tôi nhìn thấy rằng liệu pháp quấn đoạn như hình ảnh động đang xảy ra. Và nó trông xấu xí.

Xem this js fiddle để biết ví dụ về hiệu ứng không mong muốn.

Bạn khuyên bạn nên nhận được hiệu ứng tương tự như thế nào nhưng không có gói? (Giống như .slideUp()/slideDown()) ...

Nhờ sự giúp đỡ

Answer 1

Bạn cần phải thiết lập overflow: hidden trên thùng sơn, và sau đó áp dụng các hình ảnh động để container.

Updated fiddle with fix here

Answer 2

Hãy thử điều này:

CSS:

#wrap{ 
width:200px; 
    overflow: Hidden; 
} 
#text{ 
width:200px; 
} 

Script:

setTimeout(
function(){ 
    $('#wrap').animate(// Changed to slide the wrap instead of the #text 
     { 
      width: ['toggle', 'swing'] 
     }) 
    }, 
1000); 

http://jsfiddle.net/RDsqy/2/