How to override JS function in WordPress

1 Views

Trying to override the handlerOut (mouseleave) effect from another function: 

 $( '.main-nav .menu-item' ).hover(
                    function() {
                            $( '> .sub-menu' , this )
                                    .stop( true, true )
                                    .fadeIn( { duration: 250 } );

                    }, function() {
                            $( '> .sub-menu' , this )
                                    .stop( true, true )
                                    .fadeOut( { duration: 250 } );
            } );

I don’t want the elements to fade out but not sure how to override this. Is it possible to stop the hover effect from happening using another function?

Post Views: 1

Related posts

2 comments

  1. You can remove the event handlers using .off and attach your own instead. You have to make sure that your script runs after the other script.

    Note : .off works for jQuery 1.7 or newer, if you are using an older version see .unbind

    $('.main-nav .menu-item')
  .off('mouseenter mouseleave')
  .hover( /* your own hover functions */ );

    or just the mouseleave event if you don’t want to change the over effect:

    $('.main-nav .menu-item')
  .off('mouseleave')
  .mouseleave( /* your own hiding function */ );

  2. Just disable mouseleave event by calling .off('mouseleave'), additionally if you want to do some other work, use .mouseleave

    $('.main-nav .menu-item').off('mouseleave').mouseleave( function () {
  console.log('now it will not fadeout on mousle leave');
});

Comments are closed.