jquery: animer scrollLeft

Je suis assez nouveau à jquery et n'arrive pas à comprendre pourquoi mon code ne fonctionne pas. J'ai une mise en page horizontale et que vous voulez utiliser la scrollLeft() fonction (qui fonctionne parfaitement avec ce code)

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

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

Mais idéalement, j'aimerais animer ce donc que lorsque #suivant est cliqué, il y a un joli effet d'animation pour les faire défiler vers la gauche de la fonction

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

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

Mais en vain. Ce que je fais mal?

  • scrollLeft() est une fonction jQuery qui fonctionne uniquement sur les éléments du DOM. animate() ne peut fonctionner que sur les DOM attributs de style, pas de fonctions.
  • Dans ma situation, j'ai constaté que certains éléments fixes couvrir le site de l'ul , et qui me erreur de l'amt est de dépassement( En fait, l'ul n'est pas de débordement). J'ai donc scrollLeft tant de fois , et ça ne fonctionne pas. Et la raison pourquoi j'ai pris l'ul est de dépassement de ce qui ne l'est pas.
InformationsquelleAutor bswinnerton | 2011-07-29
  1. 73

    Vous voudrez quelque chose comme ceci: 

    
$("#next").click(function(){
      var currentElement = currentElement.next();
      $('html, body').animate({scrollLeft: $(currentElement).offset().left}, 800);
      return false;
   });

    Je crois que cela devrait fonctionner, il est adopté à partir d'un scrollTop fonction.

    • Rien ne semble se produire. Je pense que c'est parce que vous avez pris la scrollTo fonction qui sélectionne l'élément suivant. Ce que j'ai est un énorme ul avec de multiples li et le thème horizontal a deux boutons #précédente et #next", sélectionner l'élément suivant ou précédent dans l'ul et ce que je voudrais.. c'est pour bien animer cette navigation. C'était ma question de départ: stackoverflow.com/questions/6867914/jquery-jump-to-next-element
    • En théorie, vous devriez juste être capable de combiner les deux fonctions parce que vous exécutez le .click fonction, mais vous êtes à l'appel de l'autre sein. Peut-être essayer $(window) au lieu de $('html, body').
    • Droit, mais ce que je disais c'est que je pense (et je pourrais très bien être faux) que vous n'avez pas inclure le scrollTo fonction dans votre code ci-dessus, il n'est donc pas vraiment une fonction dans une fonction, même avec $(window)
    • Le scrollTo code de fonction devient $('html, body').animate({scrollLeft: $(currentElement).offset().left}, 800);, de mettre votre scrollTo le code exactement comme il est, il serait $(window).animate({scrollLeft: $(currentElement).position().left}, 750);. Cependant, l'autre chose que vous pourriez vouloir essayer est de tourner la element partie de votre scrollTo code de fonction à $(element), et de voir si cela fonctionne.
    • Sauvé ma journée. Cheers
    • pourquoi êtes-vous en renvoyant false?
    • Paon $(window).animate( { scrollLeft : 320 }) ne fonctionne pas sur FF ou Chrome à l'aide de jQuery: 1.11.3

    InformationsquelleAutor jezza-tan
  2. 34

    Tout d'abord je tiens à souligner que les animations css serait probablement mieux si vous faites beaucoup de fois mais j'ai fini par obtenir l'effet désiré par l'emballage .scrollLeft à l'intérieur .animer

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

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

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

    Le deuxième paramètre est la vitesse, et vous pouvez également ajouter un troisième paramètre si vous utilisez le défilement régulier de quelque sorte.

    • Quel genre de css animation? Faites défiler vers la gauche n'est pas une propriété css
    InformationsquelleAutor Colin