Làm thế nào để làm cho mouseenter, mouseleave chuyển đổi trong một chức năng

Question

Tôi nhìn quanh đây và tìm thấy một giải pháp, nhưng tôi đã tự hỏi nếu có một cách để viết mã đơn giản hơn. Về cơ bản những gì tôi tạo ra là một fade đơn giản trong, mờ dần hiệu ứng di chuột cho một hình ảnh.

$(document).on('mouseenter','.photos div',function() { 
    "use strict"; 
    $(this).find('img.nocolor').stop().animate({ 'opacity': '0' }, 800); 
}); 

$(document).on('mouseleave','.photos div',function() { 
    "use strict"; 
    $(this).find('img.nocolor').stop().animate({ 'opacity': '1' }, 800); 
}); 

Tôi biết bạn có thể đặt con chuột, cùng với nhau nhưng tôi không biết cách cấu trúc chức năng chuyển đổi như thế. Vui lòng cho tôi biết cách đơn giản hóa điều này.

Answer 1

Có lý do nào bạn muốn đạt được hiệu ứng này với Javacscript không? Bạn có thể đạt được chính xác những gì bạn đang sau với CSS tinh khiết:

#an-image { 
    opacity: 0.2; 
    transition: opacity 0.8s linear; 
} 

#an-image:hover { 
    opacity: 1; 
    transition: opacity 0.8s linear; 
} 

Bạn có thể thấy một ví dụ làm việc ở đây: http://jsfiddle.net/oqqx1z3k/

Bạn có thể xem this example để xem nó kết hợp với ví dụ bạn đưa ra.

Answer 2

$('.photos div').hover(
    function() { 
    // MOUSE ENTER 
    $(this).find('img.nocolor').stop().animate({ 'opacity': '0' }, 800); 
    }, function() { 
    // MOUSE LEAVE 
    $(this).find('img.nocolor').stop().animate({ 'opacity': '1' }, 800); 
    } 
); 

EDIT: selector để ràng buộc chức năng không ghi lại, đó là '.photos div'

Answer 3

Bạn có thể phân biệt bằng event.type

$(document).on('mouseenter mouseleave','.photos div',function (evt) { 
    "use strict"; 
    var opacity = evt.type === 'mouseenter' ? 0 : 1; 
    $(this).find('img.nocolor').stop().animate({ 'opacity': opacity }, 800); 
}); 

Ngoài ra phương pháp fadeTo() là giống như phim hoạt hình bạn đang sử dụng

$(document).on('mouseenter mouseleave','.photos div',function (evt) { 
    "use strict"; 
    var opacity = evt.type === 'mouseenter' ? 0 : 1; 
    $(this).find('img.nocolor').stop().fadeTo(800, opacity); 
}); 

Answer 4

Bạn có thể sử dụng event.type để đạt được điều này với một chức năng chuyển đổi đơn như sau:

function toggleAnimation(eventName) 
 
{ 
 
    "use strict"; 
 
    
 
    $(document).find('img.nocolor').stop().animate({ 'opacity': 
 
      (eventName == 'mouseenter') ? '0' : '1' }, 800); 
 
} 
 

 

 
$(document).ready(function(){ 
 

 
    $(document).on('mouseenter mouseleave','.photos div',function (event) { 
 
    toggleAnimation(event.type); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="photos"> 
 
    <div> 
 
<img width="300px" src="http://www.lb.undp.org/content/dam/lebanon/img/AboutLebanon/Lebanon.png" class="nocolor" /> 
 
    </div> 
 
</div>

Answer 5

tôi đã không kiểm tra này nhưng tôi tin rằng bạn có thể sử dụng .fadetoggle() chức năng mà sẽ làm những gì bạn muốn.

$('.photos div').on('mouseenter mouseleave',function() { 

    $(this).find('img.nocolor').togglefade('slow'); 
}); 

hoặc

$('.photos div').on({ 
    mouseenter: function() { 
     $(this).find('img.nocolor').stop().animate({ 'opacity': '0' }, 800); 
    }, 
    mouseleave: function() { 
     $(this).find('img.nocolor').stop().animate({ 'opacity': '1' }, 800); 
    } 
}) 

Tuy nhiên tôi không phải là một fan hâm mộ của làm việc với chuyển đổi và MouseEnter và MouseLeave đơn giản chỉ vì những chức năng làm việc dựa trên di chuyển chuột và không vị trí dựa trên tài liệu html.