javascript - Adding "hoverIntent" to .live function - Stack Overflow

admin管理员组

文章数量:1277901

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');   
            });        

        });        

    });

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');   
            });        

        });        

    });

• javascript
• jquery
• jquery-plugins

Share Improve this question Follow edited Jan 18, 2011 at 17:40 Brian asked Jan 18, 2011 at 17:30 BrianBrian 3,9591212 gold badges5858 silver badges104104 bronze badges 1

• 5 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./hernan/hoverIntent mit - github./hernan/hoverIntent/mit/… – jBeas Commented Jan 9, 2012 at 21:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

http://cherne/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.

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

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)

本文标签： javascriptAdding quothoverIntentquot to live functionStack Overflow