Скользить из стороны в сторону

Question

Скользить из стороны в сторону

0

Я использую jquery для перемещения div, содержащего эскизы слева направо. Функции ниже работают, но они будут перемещать только 30 пикселей каждый раз, когда мышь перекатывается по стрелке. Есть ли способ передвижения сказать 30px в секунду все время мыши над стрелкой, а затем, как только мышь перемещается, анимация останавливается?

$(".left-arrow").mouseover(function(){
 $("#slides").animate({ 
    left: "-=30px",
  }, 1000 );
}); 

$(".right-arrow").mouseover(function(){
 $("#slides").animate({ 
    left: "+=30px",
  }, 1000 );
});

Jack Sniper 12 нояб. 2013, в 03:10

Источник

Теги:

jquery

css

mouseover

jquery-animate

1 ответ

Ещё вопросы

CtrlX · Accepted Answer · 2013-11-11T23-52-00.000Z

Основная логика заключается в использовании функции обратного вызова animate() для возобновления анимации по завершении:

$(".left-arrow").mouseover(function(){
  playanim("+=30px");
}).mouseleave(function(){
  stopanim();
}); 

$(".right-arrow").mouseover(function(){
  playanim("-=30px");
}).mouseleave(function(){
  stopanim();
}); 

function playanim(speed)
{
  // launch the anim with the desired side
  $("#slides").animate({ 
    left: speed,
  }, 1000,'linear',function(){playanim(speed);});
}

function stopanim()
{
  // stop the animation and clear the animation queue
  $("#slides").stop(true);
}

Он должен работать :)

Вот Jiddle, чтобы проверить: JsFiddle

РЕДАКТИРОВАТЬ: Чтобы добавить ограничение к скольжению, быстрый способ можно выполнить, проверив левую позицию слайда. Посмотрите на эту Jsfiddle для быстрого образца с ограничением min/max

Круто, отлично работает! Еще один вопрос, как бы я установил ограничение на то, как далеко может проходить div слева и справа? IE: стрелка влево не позволит #slides двигаться дальше 0;
Вы должны добавить тест, который ограничивает положение слайда в playanim (). Я обновляю код
О, кстати, вы можете пометить этот ответ как принятый?