jQuery .load() với fadeTrong hiệu ứng

Question

Tôi đang cố gắng tải # nội dung của url qua AJAX bằng cách sử dụng jQuery trong #primary. Nó tải nhưng không phai. Tôi đang làm gì sai?

$('.menu a').live('click', function(event) { 
     var link = $(this).attr('href'); 
     $('#content').fadeOut('slow', function(){ 
      $('#primary').load(link+' #content', function(){ 
       $('#content').fadeIn('slow'); 
      }); 
     }); 
     return false; 
    }); 

Rất cám ơn sự giúp đỡ của bạn.

Answer 1

Trên thực tế tôi đã có thể làm điều đó bằng cách áp dụng các hiệu ứng cho các div wrapper thay vì ...

$('#primary').fadeOut('slow', function(){ 
    $('#primary').load(link+' #content', function(){ 
     $('#primary').fadeIn('slow'); 
    }); 
}); 

Answer 2

Khi sử dụng load() jQuery sử dụng nội bộ html() để cập nhật phần tử của bạn. Điều này có nghĩa là bạn không thể áp dụng bất kỳ hoạt ảnh nào cho nó, vì bạn chỉ đang cập nhật thuộc tính innerHTML của phần tử.

Thay vào đó, bạn cần phải viết yêu cầu AJAX của riêng mình để nhận HTML mới, đặt nó vào phần tử, sau đó gọi fadeIn().

$('.menu a').live('click', function(event) { 
    var link = $(this).attr('href'); 

    $('#content').fadeOut('slow', function() { 
     $.get(
      link +' #content', 
      function(data) { 
       $("#primary").html(data).fadeIn('slow'); 
      }, 
      "html" 
     ); 
    }); 
    return false; 
}); 

tôi đã sử dụng get() ở đây, nhưng bạn có thể cũng giống như dễ dàng sử dụng post() hoặc ajax().

Ngoài ra, chỉ cần lưu ý, live() không được dùng nữa. Thay vào đó, bạn nên sử dụng delegate() hoặc nếu bạn đang sử dụng jQuery 1.7+, on().

Answer 3

Tôi đã tìm thấy làm một cái gì đó như thế này hoạt động tốt ...

$ (' #Div '). FadeOut (0) .fadeIn(). Load (' foo.blah.html ');

Answer 4

Bạn cũng có thể sử dụng .load() trong mờ dần hiệu lực thi hành như thế này

$("#container").fadeOut("slow").load('data.html').fadeIn('slow');

Answer 5

Đây là cách tốt nhất để fade in ra nó naturaly, trước tiên bạn ẩn chứa sau đó bạn/bạn tải trang của bạn trong container này (nó sẽ được nạp nhưng ẩn) sau đó chỉ cần sử dụng chức năng Jquery .fadeIn() và nó sẽ thôi ẩn nó thêm hiệu ứng đặc biệt.

$(".myClass").click(function() 
{ 
    $("#Container").hide(); 
    $("#Container").load("magasin.html"); 
    $("#Container").fadeIn(); 
}); 

Answer 6

Chỉ cần này:

$('.element').load('file.html',function(){}).hide().fadeIn(); 

Hoặc thêm hành vi này như mặc định trong tải() chức năng:

$.fn.load_=$.fn.load; 
$.fn.load=function(){ 
    return $.fn.load_.apply(this,arguments).hide().fadeIn(); 
}