JQuery hover effect issue

Question

Before I start my JS knowledge isn't the best! However, I have tried to give this a go! Basically I have three image stacked on top of eachother and if I hover each of them it dims the other two out - along with this each image has some text and the text does the same so if you hover over the layer assocaited to that text it dims out the other two. this works up until the point you say mouse out from the last hovered image and it stays in its animated state and does not return to normal.

<img class="image-grass top" src="<?php bloginfo('template_url'); ?>/assets/images/top-grass-layer.png" />
<img class="image-grass middle" src="<?php bloginfo('template_url'); ?>/assets/images/middle-grass-layer.png" />
<img class="image-grass bottom" src="<?php bloginfo('template_url'); ?>/assets/images/bottom-grass-layer.png" />    

<p class="layer-one-text">Roll out the artificial grass and fix around the perimeter with turf pins.</p>
<p class="layer-two-text">Lay out the Sportsbase panels and interlock them together to form a continuous platform. The panels are manufactured from recycled plastic and the hollow design provides cushioning for comfort and drainage for water removal.</p>
<p class="layer-three-text">Select a flat area of grass, earth, concrete or Tarmac. Fill any obvious hollows with sand.</p> 

$('.top, .layer-one-text').mouseenter( function() { 
    $('.middle, .layer-two-text, .bottom, .layer-three-text').stop(true, true).animate({ opacity: 0.3 });
    $('.top, layer-one-text').mouseleave( function(){
        $('.middle, .layer-two-text, .bottom, .layer-three-text').animate({ opacity: 1 });
    })
})

$('.middle, .layer-two-text').mouseenter( function() { 
    $('.top, .layer-one-text, .bottom, .layer-three-text').stop(true, true).animate({ opacity: 0.3 });
    $('.middle, .layer-two-text').mouseleave( function(){
        $('.top, .layer-one-text, .bottom, .layer-three-text').animate({ opacity: 1 });
    })  
})

$('.bottom, .layer-three-text').mouseenter( function() { 
    $('.middle, .layer-two-text, .top, .layer-one-text').stop(true, true).animate({ opacity: 0.3 });
    $('.bottom').mouseleave( function(){
        $('.middle, .layer-two-text .top, .layer-one-text').animate({ opacity: 1 });
    })  
})

Here is an image to illustrate my end goal:

Answer 1

I think - without any jsfiddle to test - that you should undo the mouseenter like this:

$('.top, .layer-one-text').mouseenter( function() { 
    $('.middle, .layer-two-text, .bottom, .layer-three-text').stop(true, true).animate({ opacity: 0.3 });
    })
}).mouseleave(function() {
    $('.middle, .layer-two-text, .bottom, .layer-three-text').animate({ opacity: 1 });
});

You are triggering the mouseleave functions while you are on the element, which doesn't make sense.

Also this function has .bottom , .layer-three-text elements to animate. Is this correct?

Answer 2

Try using .on('hover', function(){}) instead of .mouseenter . With mouseenter you have to write the mouseout code specifically which is causing the issue here. with hover this issue should be resolved.

Answer 3

You were creating the mouseleave event listener every time you hovered over the image:

I think this is what you were going for: https://jsfiddle.net/eosrphsa/

Also, the last jQuery selector was only $('.bottom').mouseleave where I think you wanted $('.bottom, .layer-three-text'). .