Hoạt ảnh thay đổi hình ảnh jQuery Hover

Question

Tôi có thẻ IMG với hình ảnh thang độ xám. Tôi đã kết nối một sự kiện Hover() để thay đổi "src" thành một hình ảnh màu khi di chuột và quay lại màu xám khi di chuột ra ngoài.

Điều này chỉ hoạt động tốt, tuy nhiên thay đổi đột ngột. Tôi muốn thêm một chút fadeIn() vào hiệu ứng để màu sắc xuất hiện mờ dần và mờ dần. Tôi đã viết những điều sau đây mà tôi nghĩ rằng sẽ làm việc, nhưng không. (Hình ảnh thay đổi, nhưng không có mờ dần hoặc trì hoãn hiệu ứng). Tôi đang làm gì sai?

  $("#showForm").hover(
       function() { 
       $(this).fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmall.gif'); 
       }); 
       }, 
       function() { 
       $(this).fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       }); 
       } 
      ); 

Answer 1

Dưới đây là một vài giải pháp. Mã của bạn không hoạt động vì bạn đang đặt nguồn thay đổi hình ảnh ngay lập tức.Nó có lẽ dễ dàng hơn chỉ để tải cả hai hình ảnh, che phủ chúng với CSS và sau đó làm mờ màu một trong khi thùng chứa mẹ được kết nối. Hoặc bạn có thể vượt qua phai chúng

css

.fader { display: inline-block; } 
.fader img:last-child { 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
}​ 

html

<div class="fader"> 
    <img src="http://placehold.it/300x300/000fff" /> 
    <img src="http://placehold.it/300x300/fff000" /> 
</div>​ 

fade in trên mouseover

http://jsfiddle.net/Xm2Be/3/

$('.fader').hover(function() { 
    $(this).find("img:last").fadeToggle(); 
});​ 

mốt chéo e

http://jsfiddle.net/Xm2Be/2/

$('.fader').hover(function() { 
    $(this).find("img").fadeToggle(); 
});​ 

Answer 2

$(this).fadeIn('slow', 

là thực sự cố gắng để phai trong các yếu tố này, chậm rãi, và 'này' đề cập đến

$("#showForm") 

Thay vào đó nếu bạn muốn, bạn có thể đưa hình ảnh màu trực tiếp trên màu xám hiện tại hình ảnh, và đánh dấu các hình ảnh màu ẩn, sau đó có nó từ từ mờ dần. Giả sử chúng được định vị trên đầu trang của nhau, bạn có thể làm:

$("#showForm").hover(
    function() { 
     $("#colorImageID").fadeIn(); 
    }, 
    function() { 
     $("#colorImageID").fadeOut(); 
    }); 
    } 

);

giả html là một cái gì đó tương tự (nơi sameAbsolutePosition là css để đặt chúng ở vị trí chính xác cùng, như vậy có lẽ cái gì đó như position: absolute; left: 20; top: 20px;):

<img src='images/AddButtonSmallGray.gif' class="sameAbsolutePosition"> 
<img src='images/AddButtonSmall.gif' style="display:none;" class="sameAbsolutePosition"> 

Để nhắc lại, bạn sẽ làm mờ hình ảnh mới ở trên cùng của hình ảnh khác. Bạn cũng có thể làm mờ hình ảnh màu xám đồng thời.

Answer 3

Bạn đang mờ dần ở đâu? Fade in không display:block với opacity thay đổi từ 0 đến 100. Fade ra không display:none với opacity thay đổi từ 100 đến 0.

Một lần, bạn fadeIn, hình ảnh là display:block và opacity là 100. Vì vậy, bạn không nhìn thấy một hình ảnh động . Vì vậy, hoặc làm một màn hình: none hoặc fadeOut trước khi fadeIn một lần nữa.

Đưa ra ví dụ với những điều giải thích. Bạn nên thay đổi nó theo yêu cầu của bạn. giải pháp

$("#showForm").hover(
       function() { 
       $(this).fadeOut('fast').fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmall.gif'); 
       }); 
       }, 
       function() { 
       $(this).fadeOut('fast').fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       }); 
       } 
      ); 

Answer 4

Tốt hơn nhiều:

Quên javascript để làm công việc này. Sử dụng CSS sprites để thay thế. Nếu bạn nhấn mạnh vào việc có fadeIn, fadeOut, hãy sử dụng các hiệu ứng chuyển tiếp.

CẬP NHẬT: Trả lời nhận xét bên dưới, tôi không thể viết một số mã vì không có cách nào tôi có thể dự đoán kích thước và vị trí trong ảnh của Todd. Tôi cũng muốn làm rõ rằng đề xuất của tôi là sử dụng sprites và sau đó chuyển tiếp để tăng cường "chức năng" và không chỉ chuyển tiếp vì tôi cho rằng anh ta cần điều này để làm việc trong IE8 và IE9.

Answer 5

Hãy thử với điều này

$("#showForm").hover(
      function() { 
       $(this).fadeOut('fast',function(){ 
       $(this).attr("src", 'images/AddButtonSmall.gif'); 
       $("#img_src").html("images/AddButtonSmall.gif"); 
       }); 
      $(this).fadeIn('fast'); 
      }, 
      function() { 
      $(this).fadeOut('fast',function(){ 
       $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       $("#img_src").html("images/AddButtonSmallGray.gif"); 
       }); 
      $(this).fadeIn('fast'); 
      } 
     );​ 

Dưới đây là Fiddle

Answer 6

Bạn có thể làm phai chéo này với css3 sử dụng chuyển tiếp quá. Không có sẵn cho tất cả các trình duyệt nhưng vẫn ... http://www.w3schools.com/css3/css3_transitions.asp

Bằng cách tương tự như CSS: image link, change on hover

Ví dụ:

#showForm 
{ 
    background: transparent url('images/AddButtonSmallGray.gif') center top no-repeat; 

    -webkit-transition:all 0.3s ease-in-out; 
    -moz-transition:all 0.3s ease-in-out; 
    transition:all 0.3s ease-in-out; 
} 

#showForm:hover { 
    background-image: url('images/AddButtonSmall.gif'); 
}