J Query Visibility Hidden

Question

Making an Image slider. Only want next button(btnNext) to appear when an Image is hovered upon(.myImages). I want it to then disappear when I mouseOut. Problem is using setTimeout has caused me massive problems. To get off the Image I inadvertently hover on Image again. :{ Looking for a fix Thank you for any help.

$(document).ready(function(){
    $('.myImages').hover(function() {
        $(this).addClass('transition');
         $('.Holder').addClass('transition');
         $('.btnNext').css({'margin-left':'70px'}); 
            var that = this;
    setTimeout( function(){
         $('.btnNext').css({'visibility':'visible'}); 
    },500);
    }, function() {
        $(this).removeClass('transition');
         $('.Holder').removeClass('transition');
          $('.btnNext').css({'visibility':'hidden'}); 
    });
  });

$(document).ready(function(){
    $('.btnNext').hover(function() {
        $('.myImages').addClass('transition');
         $('.Holder').addClass('transition');
         $('.btnNext').css({'visibility':'visible'}); 
         }, function() {
           $('.btnNext').css({'visibility':'hidden'}); 
        $(this).removeClass('transition');
           });
});

Answer 1

If You want this on mouse over on Holder then:

$(function(){
    $('.Holder')
    .on('mouseover', function() {
         $('.myImages').addClass('transition');
         $(this).addClass('transition');
         $('.btnNext').stop(true, true).fadeIn(300);
    })
    .on('mouseout', function() {
         $('.myImages').removeClass('transition');
         $(this).removeClass('transition');
         $('.btnNext').stop(true, true).fadeOut(300);    
    });
});

or if on hover on myImages:

$(function(){
    $('.myImages')
    .on('mouseover', function() {
         $(this).addClass('transition');
         $('.Holder').addClass('transition');
         $('.btnNext').stop(true, true).fadeIn(300);
    })
    .on('mouseout', function() {
         $(this).removeClass('transition');
         $('.Holder').removeClass('transition');
         $('.btnNext').stop(true, true).fadeOut(300);    
    });
});