Как сделать так, чтобы событие jquery hover срабатывало несколько раз

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

Какие-либо предложения?

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


 }
};

jquery hover infinite-carousel
person clinthorner    schedule 08.06.2010    source источник
comment
что произойдет, если вы удалите isAnimating = true; линия?   -  person mkoryak    schedule 08.06.2010

Ответы (1)


arrow_upward
2
arrow_downward

Что касается запуска событий, см. 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);
person Dan Heberden    schedule 08.06.2010
comment
Спасибо за попытку помочь мне и за столь быстрый ответ. Я все еще новичок в этом деле, и у меня все еще есть проблемы. Если бы вы могли дать мне более подробную помощь (например, ваш разговор с 5-летним ребенком), я был бы очень признателен. - person clinthorner; 08.06.2010
comment
надеюсь, что это поможет (см. новый ответ) - person Dan Heberden; 08.06.2010
comment
Я думаю, вы хотели сказать false в out() -- function out() { buttonPressed = false; } - person istruble; 08.06.2010