Comment faire feu de jquery hover event à plusieurs reprises

Question

J'ai un carrousel infini que je veux déplacer lorsque je passe la souris sur les boutons suivants et précédents. En ce moment, le vol stationnaire ne tire que cette fois. Je veux que le carrousel continue de bouger pendant que la souris se trouve dans les boutons suivants ou précédents.

Avez-vous des suggestions?

jQuery.fn.carousel = function(previous, next, options){ 
var sliderList = jQuery(this).children()[0]; 

if (sliderList) { 
    var increment = jQuery(sliderList).children().outerWidth("true"), 
    elmnts = jQuery(sliderList).children(), 
    numElmts = elmnts.length, 
    sizeFirstElmnt = increment, 
    shownInViewport = Math.round(jQuery(this).width()/sizeFirstElmnt), 
    firstElementOnViewPort = 1, 
    isAnimating = false; 

    for (i = 0; i < shownInViewport; i++) { 
    jQuery(sliderList).css('width',(numElmts+shownInViewport)*increment + increment + "px"); 
    jQuery(sliderList).append(jQuery(elmnts[i]).clone()); 
    } 

    jQuery(previous).hover(function(event){ 
    if (!isAnimating) { 
    if (firstElementOnViewPort == 1) { 
    jQuery(sliderList).css('left', "-" + numElmts * sizeFirstElmnt + "px"); 
    firstElementOnViewPort = numElmts; 
    } 
    else { 
    firstElementOnViewPort--; 
    } 

    jQuery(sliderList).animate({ 
    left: "+=" + increment, 
    y: 0, 
    queue: true 
    }, "swing", function(){isAnimating = false;}); 
    isAnimating = true; 
    } 

    }); 

    jQuery(next).hover(function(event){ 
    if (!isAnimating) { 
    if (firstElementOnViewPort > numElmts) { 
    firstElementOnViewPort = 2; 
    jQuery(sliderList).css('left', "0px"); 
    } 
    else { 
    firstElementOnViewPort++; 
    } 
    jQuery(sliderList).animate({ 
    left: "-=" + increment, 
    y: 0, 
    queue: true 
    }, "swing", function(){isAnimating = false;}); 
    isAnimating = true; 
    } 
    }); 


} 
}; 

Answer 1

En ce qui concerne le déclenchement d'événements, voir http://api.jquery.com/trigger/

$('#idOfElement').trigger('mouseover'); // or similar 

Dans le cas de votre plugin, vous voulez capturer mouseOut aussi bien. Si à la fin de votre animation, vérifiez si mouseOut a été déclenché et si ce n'est pas le cas, lancez un autre hover.

Pour votre code, je factoriser un peu:

(function($){ 
jQuery.fn.carousel = function(previousButton, nextButton, options){ 
var $sliderList = jQuery(this).children()[0]; 
var $previous = $(previousButton); 
var $next = $(nextButton); 
var isAnimating = false; 
var buttonPressed = false; 

function previous(obj) { 
    buttonPressed = true; 
    // previous animation code 
    // when you're done animating, see if buttonPressed is true still (if out was fired, then it's false) 
    // if true - call previous again 
} 
function next(obj) { 
    buttonPressed = true; 
    // next animation code 
} 
function out() { 
    buttonPressed = false; 
} 

if (sliderList) { 
    var increment = jQuery(sliderList).children().outerWidth("true"), 
     elmnts = $sliderList.children(), 
     numElmts = elmnts.length, 
     sizeFirstElmnt = increment, 
     shownInViewport = Math.round(jQuery(this).width()/sizeFirstElmnt), 
     firstElementOnViewPort = 1; 

    for (i = 0; i < shownInViewport; i++) { 
     $sliderList.css('width',(numElmts+shownInViewport)*increment + increment + "px"); // use the cached sliderList, ya? 
     $sliderList.append(jQuery(elmnts[i]).clone()); 
    } 

    $previous.hover(previous, out); 
    $next.hover(next, out); // calls next on over, out on exit 

    } 
}; 
})(jQuery);