Hình ảnh jquery hover fade swap

Question

Tôi đã tìm kiếm trực tuyến một thời gian, cố gắng tìm cách viết kịch bản jquery tốt nhất để thực hiện tác vụ đơn giản này: hoán đổi hình ảnh khi di chuột với hiệu ứng mờ dần thanh lịch. Tôi đã tìm thấy nhiều giải pháp (một số cách để cồng kềnh và thô), và thu hẹp nó xuống với những gì tôi nhìn thấy là hai tốt nhất:

http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

Đối với mục đích của tôi, tôi muốn có thể để làm điều này trao đổi di chuột nhiều lần trên một trang. Trang này là http://www.vitaminjdesign.com. Tôi hiện đang có dao động trên "nav dịch vụ" của tôi (loại khác nhau của di chuột) nhưng tôi muốn áp dụng chúng cho tất cả các nút nav, cũng như các biểu tượng xã hội ở chân trang. Tất cả các máy di chuyển sẽ là cùng một hai tập tin hình ảnh, một trong những fading trong khác trên di chuột, và trở về nghỉ. Cách tốt nhất có thể để đi về điều này là gì? Một trong những liên kết trên có lẽ?

Answer 1

Bạn cũng có thể thực hiện việc này bằng cách sử dụng một hình nền đơn và mờ dần trong & ra một div trong suốt. Dưới đây là một ví dụ nhanh, điều này có thể được mở rộng để làm việc tự động cho một lớp học duy nhất của hình ảnh:

$(document).ready(function() { 
    $("#mask-div") 
     .css({ 
      "position": "absolute", 
      "width": 275, 
      "height": 110, 
      "background": "rgba(255, 255, 255, 0.5)" 
     }) 
     .mouseover(function() { 
      $(this).fadeOut("slow"); 
     }) 
    ; 
    $("#test-img").mouseout(function() { 
     $("#mask-div").fadeIn("slow"); 
    }); 
}); 

Chạy bản demo có thể được nhìn thấy ở jsbin: demo-one

UPDATE: Đây là một giải pháp chung chung hơn (chưa đầy đủ, nhưng hiển thị một số ý tưởng): demo-two. Chỉ cần thêm lớp "fade-img" vào bất kỳ hình ảnh nào bạn muốn có hiệu ứng này.

$(document).ready(function() { 
    $(".fade-img") 
     .before("<div class='fade-div'></div>") 
     .each(function() { 
      var img = $(this); 
      var prev = img.prev(); 
      var pos = img.offset(); 

      prev.css({ "height": img.height(), "width": img.width(), "top": pos.top, "left": pos.left }) 
       .mouseover(function() { 
        $(this).fadeOut("slow"); 
       } 
      ); 
     }) 
     .mouseout(function() { 
      $(this).prev().fadeIn("slow"); 
     }) 
    ; 
}); 

Answer 2

bên $(document).ready()

$('.imgbuttonclass').hover(function(){ 
    $(this).animate({ 
     backgroundImage: 'img2.png' 
    },500); 
},function(){ 
    $(this).stop(true).animate({ 
     backgroundImage: 'img1.png' 
    },500); 
}); 

chỉnh sửa

nếu bạn chỉ muốn làm điều này: http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

sau đó sử dụng câu trả lời jthompson hoặc chỉ cần sử dụng mã từ trang đó. nếu bạn muốn sử dụng hai hình ảnh riêng biệt, bạn có thể muốn có một cái nhìn lúc này:

http://peps.ca/blog/easy-image-rollover-script-with-jquery/

và demo

những gì nó làm là

Có vẻ thông qua các tài liệu cho bất kỳ thẻ “img” hoặc “đầu vào” nào có một lớp là “ro”. Hình ảnh di chuột phải là được đặt tên giống như hình ảnh thông thường nhưng với “_o” ở cuối. Ví dụ: hình ảnh di chuột cho “image.gif” sẽ là “image_o.gif”. Sau khi tìm thấy tất cả các thẻ hình ảnh , tập lệnh tải trước tất cả hình ảnh di chuột qua và quảng cáo các sự kiện “di chuột” và “di chuột” .

Answer 3

Image Cross Fade Transition with jQuery giải thích một số cách tiếp cận này ..

Answer 4

tôi lựa chọn các giải pháp trong các liên kết thứ hai mà bạn cung cấp. Nó ngắn gọn, sạch sẽ và đơn giản.

• Tạo hai <img> thẻ
• Chức vụ một cách chính xác trong khác (CSS với z-index)
• On hover phai opacity của hình ảnh với cao z-index-0
• này làm cho nó trong suốt và bạn thấy hình ảnh cơ bản
• Khi di chuột kết thúc độ mờ mờ dần sang 1 một lần nữa.

Xong

Answer 5

Tôi nghĩ rằng đây là phương pháp tốt nhất vì nó sử dụng CSS Sprites để đạt được hiệu quả. Hướng dẫn và bản trình diễn đều minh họa cách đạt được điều này bằng cách sử dụng CSS3 cũng như jQuery. Kiểm tra nó ra dưới đây:

http://css-tricks.com/fade-image-within-sprite/