Question

I’ve been experimenting with ‘mouseenter’ event to an additional mouse hove function over an existing click function, and doesn’t seem to find the correct formula to achieve the intended effect.

Original code:

    $('.navhandle, .navcontainer, #tray-button, .page-template-template-home-php .lines, .single-portfolio .lines').hover(
function(){ $('#supersized img').addClass('resize'); //add class for css3 transitions
$thisid = $(this).attr("id");
$thisclass = $(this).attr("class");
$navnow = $('.navhandle').css('left');

if ($navnow == navhandleinit) {

if (($thisid == 'tray-button')) {
    $('#thumb-tray').stop().animate({bottom : 0}, 300);
}
    $('#prevslide').stop().animate({left: 25 }, 500, 'easeOutCubic');
    $('.navcontainer').stop().animate({ left: -210 }, 500, 'easeOutCubic');
    $('.navhandle').stop().animate({ left: -10 }, 500, 'easeOutCubic');
     $('.mainbody').stop().animate({marginLeft: 10}, 500, 'easeOutCubic', function(){ $('#supersized img').removeClass('resize'); }); //remove css3 transition class after completion
    $('.videowrapper').animate({width: '120%', paddingLeft:0}, 500, 'easeOutCubic');


    $('.nav').fadeOut(500, 'easeOutCubic');

    $('.navhandle').toggleClass("rightarrow");
},function(){ $('#prevslide').stop().animate({left: 245}, 500, 'easeOutCubic');
    $('.navcontainer').stop().animate({ left: 0 }, 500, 'easeOutCubic');
    $('.navhandle').stop().animate({ left: navhandleinit}, 500, 'easeOutCubic');
    $('.mainbody').stop().animate({marginLeft: 220}, 500, 'easeOutCubic', function(){ $('#supersized img').removeClass('resize'); }); //remove css3 transition class after completion
    $('#thumb-tray').stop().animate({bottom : -$('#thumb-tray').height()}, 300);
    $('.videowrapper').animate({paddingLeft: 220, width: '100%'}, 500, 'easeOutCubic');

    $('.nav').fadeIn(500, 'easeOutCubic');

    $('.navhandle').toggleClass("rightarrow");

    $navnow = navhandleinit;
    }

Simply changing ‘click’ to ‘mouseenter’ works on triggering the effect, but not isolating it to specific elements.

The failed attempt:

  jQuery(function($) {

var navhandleinit = $('.navhandle').css('left');
var navwidth = $('.navcontainer').width() + 30;
var mainmargin = $('.mainbody').css('margin-left');
var $navnow = $('.navhandle').css('left');
var navtray = $('#thumb-tray').css('left');

$('.navhandle, .navcontainer').mouseenter(function() {

$('#supersized img').addClass('resize');
$thisid = $(this).attr("id");
$thisclass = $(this).attr("class");
$navnow = $('.navhandle').css('left');

if ($navnow == navhandleinit) {

if (($thisid == 'tray-button')) {
    $('#thumb-tray').stop().animate({bottom : 0}, 300);
}
    $('#prevslide').stop().animate({left: 25 }, 500, 'easeOutCubic');
    $('.navcontainer').stop().animate({ left: -210 }, 500, 'easeOutCubic');
    $('.navhandle').stop().animate({ left: -10 }, 500, 'easeOutCubic');
     $('.mainbody').stop().animate({marginLeft: 10}, 500, 'easeOutCubic', function(){ $('#supersized img').removeClass('resize'); }); //remove css3 transition class after completion
    $('.videowrapper').animate({width: '120%', paddingLeft:0}, 500, 'easeOutCubic');


    $('.nav').fadeOut(500, 'easeOutCubic');

    $('.navhandle').toggleClass("rightarrow");



} else {

    $('#prevslide').stop().animate({left: 245}, 500, 'easeOutCubic');
    $('.navcontainer').stop().animate({ left: 0 }, 500, 'easeOutCubic');
    $('.navhandle').stop().animate({ left: navhandleinit}, 500, 'easeOutCubic');
    $('.mainbody').stop().animate({marginLeft: 220}, 500, 'easeOutCubic', function(){ $('#supersized img').removeClass('resize'); }); //remove css3 transition class after completion
    $('#thumb-tray').stop().animate({bottom : -$('#thumb-tray').height()}, 300);
    $('.videowrapper').animate({paddingLeft: 220, width: '100%'}, 500, 'easeOutCubic');

    $('.nav').fadeIn(500, 'easeOutCubic');

    $('.navhandle').toggleClass("rightarrow");

    $navnow = navhandleinit;
}

});

});

How can I effectively add a mouseenter event, and optionally, a swipe event for tablets, while maintaining the original click event function?

Live page available at http://stage.daylight.pro.

I’d appreciate your help, Thank you.

Answer 1

I’m not sure if this was just omitted from your code here, but neither of your examples close the hover() and mouseenter() methods.
Your failed attempt should end with a ); like

$('.navhandle, .navcontainer').mouseenter(function() { ... });

Aside from that, I’m not sure why your hover() or mouseenter() methods would affect any click methods defined (unless something in the click() function specifically overrides something in your hover() function).

UPDATE:
If I’m understanding you, you have the following parameters/goals:

1. Existing code within a jQuery hover function
2. You’d like to keep that intact, but add an additional mouseenter function
3. There’s also an existing click function that you’d like to maintain as well
4. Also, you want touch users to experience hover and click functions instead of just click only (since touch users experience hover and click at the same instant)

As far as the mouseenter vs. hover. I would make it a little cleaner for yourself (and other developers) and separate out the functions. Rather than defining anonymous functions within the hover parameters, say something like:

$('myDiv').hover(hoverIn, hoverOut);
function hoverIn() { ... }
function hoverOut() { ... }

This way you can more easily see your over and out code distinctly. Also, this is better for reuse if you want another function to, say, disable it’s call.

Your hover, mouseenter, and mouseout function should not get in the way of click events. With each interaction, you will have both mouseenter and click happen in succession.

Maybe use jQuery mobile for tap event that will suspend the click momentarily. Ultimately, though, the hover event is only a nicety and it would most likely annoy people on touch devices to have to wait momentarily while your hover event fires before firing the click event.

Hope this helps.