jQuery: fadeout() không hoạt động trên phần tử được định vị hoàn toàn khi được tải qua AJAX

Question

Tôi đang sử dụng AJAXify trên trang web mà tôi đang làm để đạt được chuyển tiếp trang và đang gặp phải một số hành vi lạ với jQuery.

Mã của tôi:

HTML (Tôi đang mờ dần qua các nền với jQuery)

<div id="backgrounds"> 
<img src="/assets/Uploads/hpbg3.jpg" alt="" class="bodybackground"> 
<img src="/assets/Uploads/hpbg2.jpg" alt="" class="bodybackground"> 
<img src="/assets/Uploads/hpbg4.jpg" alt="" class="bodybackground"> 
<img src="/assets/Uploads/hpbg5.jpg" alt="" class="bodybackground"> 
</div> 

jQuery

$('.otherClass').each(function() { 
     $('#backgrounds').fadeOut(function(){ 
       alert('fade'); 
      }); 
}); 

$('#main .container.homepageClass').each(function() { 
     $('#backgrounds').fadeIn(); 
}); 

CSS

#backgrounds {display: none; position: absolute; left: 50%; margin-left: -714px;} 

div My dần ra một cách chính xác khi nào Tôi tải trang thông qua URL thay vì liên kết với nó thông qua liên kết AJAX (và tôi nhận được cảnh báo), tuy nhiên, khi tôi liên kết với nó thông qua điều hướng AJAXified, mờ dần không xảy ra, nhưng tôi vẫn nhận được cảnh báo hàm fadeOut() chắc chắn là kích hoạt.

Khi tôi xóa vị trí tuyệt đối khỏi CSS và liên kết tới trang qua AJAX, div của tôi sẽ mờ dần khi tôi cần đến (và tôi nhận được cảnh báo). Nó dường như chỉ gây ra vấn đề với vị trí tuyệt đối của div.

Hàm fadeIn() hoạt động chính xác với vị trí tuyệt đối khi liên kết đến trang bị ảnh hưởng thông qua AJAX hoặc với tải nặng. Nó chỉ là fadeOut đang gây ra vấn đề.

Mọi đề xuất?

Answer 1

tôi quản lý để giải quyết điều này bằng cách thêm vào một chiều rộng để div. Bizarre

Answer 2

Thử thêm thời lượng vào chức năng fadeout thực sự lớn, tức là 5-10 giây. Nếu bạn vẫn không thấy fadeout thì bạn có thể tập trung vào css nhiều hơn một chút. Nếu không, bạn biết có điều gì đó đang bị trì hoãn khi sử dụng Ajaxify và fadeout của bạn đang được kích hoạt và hoàn thành trước khi quá trình kết xuất diễn ra.

Rất tiếc, chưa thể nhận xét về câu hỏi - Tôi biết đây không phải là câu trả lời.

Answer 3

Nếu bạn đang sử dụng AJAXify gist by Balupton (có vẻ như đó là những gì bạn đang đề cập) thì tôi sẽ nói rằng tôi đã gặp phải sự cố khi tải mã Javascript qua chính sách đó. Bạn có thể xác minh rằng bạn đang tải bất kỳ Javascript nào bằng cách sử dụng tập lệnh không? Hãy thử bao gồm một Javascript trên mỗi trang AJAXified của bạn mà không có gì hơn alert("hello");. Nếu bạn không thấy mã thì tôi đặt cược Javascript của bạn thậm chí không kích hoạt. Nếu đó là trường hợp sau đó thử mã này, nó làm việc cho tôi:

$scripts.each(function(){ 
    var $script = $(this), scriptText = $script.text(); 
    scriptText = "<script>" + scriptText + "</script>"; 
    contentHtml += scriptText; 
});