jQuery scroll un div en haut et en bas à l'aide de deux boutons

J'ai un simple ensemble de deux boutons qui lors de son survol devrait faire un div déplacer vers le haut et vers le bas pour simuler un effet de défilement:

$("#down").hover(function () {

    $('.scroll').animate({ "marginTop": "-=50px" }, "fast");

});

$("#up").hover(function () {

    $('.scroll').animate({ "marginTop": "+=50px" }, "fast");

});

Cependant j'ai deux questions:

1.) J'ai besoin d'elle pour s'arrêter quand elle arrive à la fin et puis masquer le bouton de sorte qu'ils savent qu'ils ont atteint la fin

2.) Il doit se déplacer continuellement lorsque l'utilisateur a la souris sur, actuellement, il n'juste une fois sur le dessus de la souris, puis l'exécute à nouveau sur la souris quitter.

3.) Si le contenu ne dépasse pas le parent de l'élément de la hauteur, puis se cachent les deux boutons que nous n'avons pas besoin de la faire défiler.

Peut aider quelqu'un?

Je pensais que peut-être 1 pourrait être résolu par la découverte de la hauteur du panneau de défilement et de juger de son décalage de son élément parent qui le maintient et crée l'encadré vue?

Grâce

OriginalL'auteur Cameron | 2011-11-30

  1. 9

    Ce code encore besoin d'un peu de débogage, mais vous pouvez obtenir l'idée en elle:

    $(document).ready(function() {

    if ($('.content').height() > $('.container').height()) {
        $("#down").hover(function () {
            animateContent("down");
        }, function() { $('.content').stop(); });

        $("#up").hover(function () {
            animateContent("up");
        }, function() { $('.content').stop(); });
    }
});

function animateContent(direction) {  
    var animationOffset = $('.container').height() - $('.content').height();
    if (direction == 'up') {
        animationOffset = 0;
    }

    $('.content').animate({ "marginTop": animationOffset + "px" }, "fast");
}

    Code: http://jsfiddle.net/a89DF/6/

    très propre. Bien fait.

    OriginalL'auteur Samich

  2. 0

    Je pense que animate est plus utile pour les effets d'animation plutôt de la continuité et changement de variable. Vous pouvez mettre en œuvre vous-même, avec un intervalle.

    var interval;

$("#down").mouseenter(function () {
    interval = setInterval(ScrollDown, 100);
});

$("#down").mouseleave(function () {
    clearInterval(interval);
});

function ScrollDown() {
    $('.scroll').css("marginTop", "+=50px");
    //check bounds here to solve problem #1
}

/* do the same stuff for scrolling up */

    OriginalL'auteur Tesserex

  3. 0

    J'ai écrit le plugin jQuery jquery.scrollbuttons qui doit s'adapter à vos besoins. Il a un page sur github et un la page d'exemples.

    La seule chose que le plugin n'est pas faire est de cacher le bouton lorsque le défilement est fini. Si vous avez encore besoin de cette fonctionnalité, je peux facilement l'ajouter.

    OriginalL'auteur Philipp Zedler

  4. 0

    1. Vous aurez besoin de définir les animations paramètre pour les divs hauteur réelle jQuery .hauteur() la méthode

    2. Vous devriez changer votre les événements de la souris liaisons sur "mouseenter" et "mouseleave", puis avec "mouseleave", vous pouvez arrêter un élément jQuery animation avec le jQuery .méthode stop()

    3. Vous pouvez la calculer avec la jQuery .hauteur() la méthode trop.

    OriginalL'auteur p1100i