jQuery làm mờ hình ảnh mới

Question

Làm thế nào tôi có thể làm mờ một hình ảnh thành hình ảnh khác với jquery? Theo như tôi có thể nói với bạn sẽ sử dụng fadeOut, thay đổi nguồn với attr() và sau đó fadeIn một lần nữa. Nhưng điều này dường như không hoạt động theo thứ tự. Tôi không muốn sử dụng một plugin bởi vì tôi mong đợi để thêm khá một vài thay đổi.

Cảm ơn.

Answer 1

Trong trường hợp đơn giản nhất, bạn cần sử dụng gọi lại trên cuộc gọi đến fadeOut().

Giả sử một thẻ hình ảnh đã có trên trang:

<img id="image" src="http://sstatic.net/so/img/logo.png" /> 

Bạn vượt qua một chức năng như là đối số gọi lại để fadeOut() mà reset thuộc tính src và sau đó mất dần trở lại sử dụng fadeIn():

$("#image").fadeOut(function() { 
    $(this).load(function() { $(this).fadeIn(); }); 
    $(this).attr("src", "http://sstatic.net/su/img/logo.png"); 
}); 

Đối hình động trong jQuery, các cuộc gọi lại được thực hiện sau khi hoạt ảnh hoàn tất. Điều này mang lại cho bạn khả năng chuỗi hoạt ảnh liên tục. Lưu ý cuộc gọi đến load(). Điều này đảm bảo rằng hình ảnh được tải trước khi mờ dần trở lại (Cảm ơn Y. Shoham).

Here's a working example

Answer 2

Bạn có chắc chắn bạn đang sử dụng callback bạn chuyển vào fadeOut để thay đổi mã nguồn và sau đó gọi fadeIn? Bạn không thể gọi số fadeOut, attr() và fadeIn tuần tự. Bạn phải đợi fadeOut để hoàn thành ...

Answer 3

Vâng, bạn có thể đặt hình ảnh tiếp theo đằng sau hiện tại, và fadeOut một hiện tại để nó trông giống như như thể nó đang mờ dần thành hình ảnh tiếp theo.

Khi mờ dần được thực hiện, bạn trao đổi lại hình ảnh. Vì vậy, đại khái là:

<style type="text/css"> 

.swappers{ 
    position:absolute; 
    width:500px; 
    height:500px; 
} 

#currentimg{ 
    z-index:999; 
} 

</style> 

<div> 
    <img src="" alt="" id="currentimg" class="swappers"> 
    <img src="" alt="" id="nextimg" class="swappers"> 
</div> 

<script type="text/javascript"> 
    function swap(newimg){ 
     $('#nextimg').attr('src',newimg); 
     $('#currentimg').fadeOut(
      'normal', 
      function(){ 
       $(this).attr('src', $('#nextimg').attr('src')).fadeIn(); 
      } 
     ); 
    } 
</script> 

Answer 4

$("#main_image").fadeOut("slow",function(){ 
    $("#main_image").load(function() { //avoiding blinking, wait until loaded 
     $("#main_image").fadeIn(); 
    }); 
    $("#main_image").attr("src","..."); 
}); 

Answer 5

Đối với những người muốn hình ảnh để mở rộng theo tỷ lệ chiều rộng (Quy mô theo chiều rộng của trình duyệt của bạn), rõ ràng là bạn không muốn thiết lập chiều cao và chiều rộng trong PIXEL trong CSS.

Đây không phải là cách tốt nhất, nhưng tôi không muốn sử dụng bất kỳ plugin JS nào.

Vì vậy, những gì bạn có thể làm là:

1. Tạo một kích thước tương tự PNG trong suốt và đặt một ID để nó như thứ hai biểu ngữ
2. Tên hình ảnh ban đầu của bạn như đầu tiên biểu ngữ
3. Đặt cả hai người trong số họ dưới dạng DIV

Đây là cấu trúc CSS cho bạn r tham khảo:

.design-banner { 
    position: relative; 
    width: 100%; 
    #first-banner { 
     position: absolute; 
     width: 100%; 
    } 
    #second-banner { 
     position: relative; 
     width: 100%; 
    } 
} 

Sau đó, bạn có thể yên tâm làm mờ dần biểu ngữ gốc của bạn mà không cần nội dung mà đặt sau khi hình ảnh của bạn di chuyển và nhấp nháy lên xuống

Answer 6

Cũ câu hỏi nhưng tôi nghĩ rằng tôi muốn ném vào một câu trả lời . Tôi sử dụng điều này cho hình ảnh tiêu đề lớn trên trang chủ. Hoạt động tốt bằng cách thao tác z-index cho hình ảnh hiện tại và tiếp theo, hiển thị hình ảnh tiếp theo ngay bên dưới hình ảnh hiện tại, sau đó làm mờ hình ảnh hiện tại.

CSS:

#jumbo-image-wrapper 
{ 
    width: 100%; 
    height: 650px; 
    position: relative; 
} 

.jumbo-image 
{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

HTML:

<div id="jumbo-image-wrapper"> 
    <div class="jumbo-image" style="background-image: url('img/your-image.jpg');"> 
    </div> 
    <div class="jumbo-image" style="background-image: url('img/your-image-2'); display: none;"> 
    </div> 
</div> 

Javascript (jQuery):

function jumboScroll() 
{ 
    var num_images = $("#jumbo-image-wrapper").children(".jumbo-image").length; 

    var next_index = jumbo_index+1; 
    if (next_index == num_images) 
    { 
     next_index = 0; 
    } 

    $("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).css("z-index", "10"); 
    $("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).css("z-index", "9"); 
    $("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).show(); 
    $("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).fadeOut("slow"); 

    jumbo_index = next_index; 

    setTimeout(function(){ 
     jumboScroll(); 
    }, 7000); 
} 

Nó sẽ làm việc không mờ er có bao nhiêu "slide" với lớp .jumbo-image nằm trong div # jumbo-image-wrapper.