Как сделать событие jquery hover событием повторно

Question

У меня есть бесконечная карусель, которую я хочу переместить, когда наводил курсор на следующую и предыдущую кнопки. Прямо сейчас зависает только один раз. Я хочу, чтобы карусель продолжала двигаться, когда мышь находится в пределах следующей или предыдущей кнопок.

Любые предложения?

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

Что касается запуска событий см http://api.jquery.com/trigger/

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

В случае вашего плагина, вы хотите, чтобы захватить MouseOut, а также. Если в конце вашей анимации проверьте, был ли уволен mouseOut, а если нет - запустите еще один зависание.

Для вашего кода, я бы реорганизовать его немного:

(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);