4

Real simple question here - how do I add the .hoverIntent plugin from Brian Cherne to the following code in place of the .live("hover", function

        $(".highlight").live("hover", function(){
            $(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"-94px", "margin-left":"-152px"}, 500);       

        });   

Here's the full code:

    $(document).ready(function(){         

        $('#sliding_grid li').hover(function() {
          $(this).css('z-index',1).data('origTop',$(this).css('top')).data('origLeft',$(this).css('left')).addClass('highlight');

        }, function() {
          $(this).css('z-index', 0);
        });

        $(".highlight").live("hover", function(){
            $(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"0", "margin-left":"0"}, 500);       

        });   

        $(".highlight").live("mouseout", function(){
            $(this).animate({"width": "148px", "height":"90px", "top: ":$(this).data('origTop'), "left":$(this).data('origLeft'), "margin-top: ":"0", "margin-left":"0"}, 500, function(){
             $(this).removeClass('highlight');   
            });        

        });        

    });
1

3 Answers 3

6

As of this answer, the current version of the plugin is "r7" which can be found here:

http://cherne.net/brian/resources/jquery.hoverIntent.r7.js

With version "r7", you can pass a selector as the third parameter. This is like the delegate event in jQuery. When adding hoverIntent to a list of dynamic elements, bind the hoverIntent event to the parent element and use the third parameter to add a selector of the element you want to use the hoverIntent on.

For example, if you have a list of <li> elements that will be changing and you want the hoverIntent to fire on each <li> then you can do the following:

$("ul").hoverIntent(overFunction, outFunction, "li");

This is very basic so you would want to update the 2 selectors to match your exact setup.

2
  • ++++ You wouldn't believe how many posts I've had to read/try-out before finding your totally amazing answer. Thanks! May 7, 2015 at 13:47
  • Glad it helped you out Matthew!
    – Tim Banks
    May 7, 2015 at 15:52
4

Try replacing this code:

$(".highlight").live("hover", function(){
    $(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"0", "margin-left":"0"}, 500);       

});   

With this:

$('.highlight').live('mouseover', function() {  
  if (!$(this).data('init')) {  
    $(this).data('init', true);  
    $(this).hoverIntent(function(){  
      $(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"0", "margin-left":"0"}, 500);
    },  
    function(){  
      /* mouseout logic */  
    });  
    $(this).trigger('mouseover');  
  }  
});

Source

2
  • 1
    Thats a really ugly method of handling this. Not going to say it won't work... but it makes me want to cry. :)
    – gnarf
    Jan 18, 2011 at 17:48
  • Not working :( Here is your code plugged into the source: jsfiddle.net/kTFvj/4
    – Brian
    Jan 18, 2011 at 18:03
2
function animateFn(){
     $(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"-94px", "margin-left":"-152px"},200);
}

function reseteFn(){ 
    $(this).animate({"width": "148px", "height":"90px", "top: ":$(this).data('origTop'), "left":$(this).data('origLeft'), "margin-top: ":"0", "margin-left":"0"}, 500, function(){
         $(this).removeClass('highlight');   
    });
}

var config = {    
     over: animateFn, // function = onMouseOver callback (REQUIRED)    
     timeout: 200, // number = milliseconds delay before onMouseOut    
     out: reseteFn // function = onMouseOut callback (REQUIRED)    
};

$(".highlight").hoverIntent(config)
5
  • I'm going to check it out in 5 mins ;) I'll let you know
    – stecb
    Jan 18, 2011 at 18:06
  • Where's hoverintent lib? Also, the code is wrong. You have to set '$(".highlight").hoverIntent(config);' instead of '$(".highlight").live("mouseout", function(){...'
    – stecb
    Jan 18, 2011 at 18:08
  • jsfiddle.net/steweb/ZZDdR check this out! It needs some z-index and offset fixes, but seems to work ;) p.s. the plugin is added through "Add Resources" on the left
    – stecb
    Jan 18, 2011 at 18:28
  • 2
    hernan on github forked it and added support to the plugin so it binds to the live event without changing any of your code. github.com/hernan/hoverIntent commit - github.com/hernan/hoverIntent/commit/…
    – jBeas
    Jan 9, 2012 at 21:02
  • @jBeas this deserves to be written in a separate answer, not hidden in the read more comments. Apr 24, 2012 at 20:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.