Nhảy trong hoạt ảnh chiều rộng của jQuery

Question

Tôi đang gặp khó khăn khi tìm hiểu lý do hoạt ảnh của tôi nhảy. Bất kỳ ý tưởng?

http://jsfiddle.net/9F5DK/5/

jQuery(document).ready(function() { 

// Animate the single page nav 
    jQuery("a#post-nav-next").hover(

      function(){ 

      jQuery("a#post-nav-next span").stop(true, true).animate({width: "toggle", opacity: "toggle"}); 

     } 
    ); 
}); 

Answer 1

OK Tôi đã dành chút thời gian để tìm hiểu điều này. Thông thường tôi không thích thay đổi javascript html/jquery gốc nhiều và nếu điều này không làm việc cho bạn thì tôi xin lỗi. Đây là một JSFiddle mà những gì bạn muốn tôi nghĩ ...

http://jsfiddle.net/LqHwk/1/

Một điều tốt đẹp về vấn đề này thiết lập là bạn có thể thêm bao nhiêu

<div class="post-nav-next"> 

như bạn muốn bên trong wrapper và tất cả chúng sẽ hoạt động giống nhau

BTW Tôi khuyên bạn nên sử dụng plugin jquery hoverIntent.

Answer 2

vấn đề tôi thấy:

Thiết lập một chiều cao hoặc chiều rộng trên một inline <a> hoặc <span> thẻ trong CSS của bạn hoặc hình ảnh động của bạn. Đọc this article cho các vấn đề với cố gắng đặt chiều cao hoặc chiều rộng trên thẻ nội tuyến. Điều này áp dụng cho cả CSS và hoạt ảnh của bạn. Nếu bạn muốn animate chiều rộng, tôi nghĩ rằng bạn sẽ cần phải làm điều đó trên một phần tử khối.

Dường như với tôi rằng hoạt ảnh có thể bị nhầm lẫn bởi chuyển đổi cho chiều rộng và độ mờ đục. Có lẽ bạn nên tốt hơn chỉ định cả hai callbacks cho di chuột và xác định các hình ảnh động bắt đầu và điểm dừng trực tiếp hơn là để lại phương pháp chuyển đổi để có để tìm ra những gì bắt đầu và điểm dừng nên được.

Ví dụ, không làm lại HTML để chặn các phần tử (mà tôi nghĩ là cần thiết để tạo độ tin cậy cho chiều rộng), đây là một hoạt ảnh mượt mà trên chỉ độ mờ. Tôi đã đặt điểm bắt đầu trong CSS thành độ mờ bắt đầu mong muốn và tôi đã ngừng sử dụng chuyển đổi để đặt hoạt ảnh và đang thiết lập rõ ràng. Tôi không chắc chắn điều này là cần thiết, nhưng nó sures loại bỏ sự mơ hồ từ những gì chuyển đổi sẽ cố gắng để đoán những gì bạn muốn: http://jsfiddle.net/jfriend00/r2cdn/ (opacity hoạt hình chỉ trong jsfiddle này, cả hai hình ảnh động bao gồm trong jsfiddle dưới đây).

jQuery(document).ready(function() { 

// Animate the single page nav 
    jQuery("a#post-nav-next").hover(function(){ 
      jQuery("a#post-nav-next span").stop(true, true).animate({opacity: "1.0"}); 
     }, function() { 
      jQuery("a#post-nav-next span").stop(true, true).animate({opacity: "0"}); 
     } 
    ); 
}); 

Để chuyển đổi chiều rộng, bạn muốn chuyển giữa hai trạng thái nào? Điều đó không rõ ràng với tôi như một con người và có lẽ không rõ ràng với jQuery.toggle(). Nếu, những gì bạn đang cố gắng làm là animate padding bên phải, sau đó có lẽ bạn nên chỉ làm điều đó trực tiếp.

Nếu tôi đặt trong một hình động trực tiếp cho đệm và thay đổi giá trị bắt đầu trong CSS, nó bắt đầu hoạt hình trơn tru. Tôi không chắc chắn 100% tôi biết bạn đang tìm kiếm hoạt ảnh nào, nhưng đây là hướng bạn có thể đi: http://jsfiddle.net/jfriend00/PE4qQ/.

jQuery(document).ready(function() { 

// Animate the single page nav 
    jQuery("a#post-nav-next").hover(function(){ 
     jQuery("a#post-nav-next span").stop(true, true).animate({"opacity": "1.0", "padding-right": "100px"}); 
     }, function() { 
      jQuery("a#post-nav-next span").stop(true, true).animate({"opacity": "0", "padding-right": "0px"}); 
     } 
    ); 
}); 

Answer 3

Sau một thời gian, tôi quay lại để có một hoạt động khác.Hiệu quả cuối cùng có thể được nhìn thấy ở đây:

http://jsfiddle.net/Niels/zrru5/1/

Một số điều quan trọng cần chú ý những điều sau đây:

1. các overflow:hidden quy tắc ẩn văn bản như nó chứa khá sôi động.
2. white-space: nowrap; trên span ngăn chỉnh lại văn bản.
3. div được để ở trạng thái mặc định khi tải và độ rộng được lưu trữ. Chiều rộng đó sau đó được áp dụng lại trong hoạt ảnh di chuột.

Một người nào đó giỏi hơn tôi sẽ làm cho js súc tích hơn, nhưng bạn có nó. Một hiệu ứng tốt đẹp cho điều hướng bài đăng.