How to make mouseenter, switch mouseleave to one function

Question

I looked around and found a solution, but I was wondering if there was a way to write simpler code. Basically, what I created just fades out, the hover effect for the image disappears.

$(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); }); 

I know that you can put mouseenter, mouseleave together, but I don't know how to structure such a switch function. Please let me know how to simplify this.

Answer 1

Is there a reason why you want to achieve this effect with Javacscript? You can achieve exactly what you need with pure CSS:

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

Here you can see a working example: http://jsfiddle.net/oqqx1z3k/

You can view this example to see it in combination with the example you specified.

Answer 2

I have not tested this, but I believe that you can use the .fadetoggle () function, which will do what you want.

 $('.photos div').on('mouseenter mouseleave',function () { $(this).find('img.nocolor').togglefade('slow'); }); 

or

 $('.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); } }) 

However, I am not a fan of working with toggle, mouseenter, and mouseleave simply because these functions work based on mouse movement and not based on an html document.

Answer 3

You can distinguish using 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); }); 

Also fadeTo() method matches what you use

  $(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

 $( '.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: the selector to bind the function is not a document, it is a '.photos div'

Answer 5

You can use event.type to achieve this with a single switch function:

 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>