jquery: анимирайте превъртане наляво

Аз съм съвсем нов в jquery и изглежда не мога да разбера защо кодът ми не работи. Имам хоризонтално оформление и искам да използвам функцията scrollLeft() (която работи перфектно с този код)

$("#next").click(function() {
    currentElement = currentElement.next();
    scrollTo(currentElement);    
});

function scrollTo(element) {
    $(window).scrollLeft(element.position().left);
}

Но в идеалния случай бих искал да анимирам това, така че когато се щракне върху #next, да има хубав анимиран ефект за функцията за превъртане наляво

$("#next").click(function() {
    currentElement = currentElement.next();
    scrollTo(currentElement);    
});

function scrollTo(element) {
    $(window).animate({scrollLeft: element.position().left}, 750);
}

Но без резултат. какво правя грешно


jquery jquery-selectors
person bswinnerton    schedule 29.07.2011    source източник
comment
scrollLeft() е jQuery функция, която работи само върху DOM елементи. animate() може да работи само с атрибути на DOM стил, но не и с функции.   -  person Jason Kaczmarsky    schedule 29.07.2011
comment
В моята ситуация открих, че някои фиксирани елементи покриват и двата сайта на ul и тази грешка ми ul е препълване (Всъщност ul не е препълване). Така че превъртях наляво толкова много пъти и не проработи. И причината, поради която съм объркал ul, е препълването, което не е така.   -  person alan9uo    schedule 29.01.2019

Отговори (2)


arrow_upward
85
arrow_downward

Ще искате нещо подобно: 


$("#next").click(function(){
      var currentElement = currentElement.next();
      $('html, body').animate({scrollLeft: $(currentElement).offset().left}, 800);
      return false;
   });
Вярвам, че това трябва да работи, взето е от scrollTop функция.

person ayyp    schedule 29.07.2011
comment
Изглежда нищо не се случва. Мисля, че е така, защото сте извадили функцията scrollTo, която избира следващия елемент. Това, което имам, е огромен ul с множество li и хоризонталната тема има два бутона #previous и #next, които избират следващия или предишния елемент в ul и това, което бих искал... е да анимирам добре тази навигация. Ето първоначалния ми въпрос: stackoverflow.com/questions/6867914 /jquery-jump-to-next-element - person bswinnerton; 29.07.2011
comment
На теория просто трябва да можете да комбинирате двете функции, защото изпълнявате функцията .click, но извиквате другата в нея. Може би опитайте $(window) вместо $('html, body'). - person ayyp; 29.07.2011
comment
Добре, но това, което казвах, е, че мисля (а може и да греша), че не сте включили функцията scrollTo в горния код, така че това всъщност не е функция във функция, дори и с $(window) - person bswinnerton; 29.07.2011
comment
Функционалният код scrollTo става $('html, body').animate({scrollLeft: $(currentElement).offset().left}, 800);, за да поставите вашия scrollTo код точно както е, той ще бъде $(window).animate({scrollLeft: $(currentElement).position().left}, 750);. Другото нещо, което може да искате да опитате обаче, е да превърнете частта element във вашия функционален код scrollTo в $(element) и да видите дали това работи. - person ayyp; 29.07.2011
comment
защо връщаш false? - person Thalatta; 17.01.2015
comment
@Andrew Peacock $(window).animate( { scrollLeft : 320 }) не работи на FF или Chrome с помощта на jQuery: 1.11.3 - person Martin Krung; 20.07.2015

arrow_upward
43
arrow_downward

Първо трябва да отбележа, че css анимациите вероятно ще работят най-добре, ако правите това много, но в крайна сметка постигнах желания ефект, като обвих .scrollLeft вътре в .animate

$('.swipeRight').click(function()
{

    $('.swipeBox').animate( { scrollLeft: '+=460' }, 1000);
});

$('.swipeLeft').click(function()
{
    $('.swipeBox').animate( { scrollLeft: '-=460' }, 1000);
});

Вторият параметър е скорост и можете да добавите и трети параметър, ако използвате някакъв вид плавно превъртане.

person Colin    schedule 10.10.2014
comment
Какъв вид css анимация? Превъртането наляво не е свойство на css - person Luke; 04.04.2019
comment
Превъртете до конкретна позиция (т.е. const left = 200;) по следния начин: $(element).animate( { scrollLeft: left }, 1000); - person yohosuff; 04.07.2020