Jquery Combiner SlideUp/vers le Bas et cliquez sur

J'ai créé deux scripts, un qui a glisser vers le haut et faites glisser vers le bas les commandes qui fonctionnent sur des minuteries lorsque la page est chargée. Le second est un événement click où un slideup de la commande est exécutée quand un lien est cliqué. Ces deux scripts fonctionnent séparément, mais je ne peux pas les amener à travailler ensemble.

Ici, est le temps de slideup/bas script:

$(document).ready(function() {
    $('.slide-out-div').hide();
    $('.slide-out-div')
        .delay(5000)
        .slideDown(300);
    $('.slide-out-div')
        .delay(5000)
        .slideUp(500);
});

Ici est le clic de script:

window.onload = function() {
    $(document).('#clickme').click(function () {
        if ($('.slide-out-div').is(":hidden")) {
            $('.slide-out-div').slideDown("slow");
        } else {
            $('.slide-out-div').slideUp("slow");
        }
    });
};

Comment c'est censé fonctionner, c'est quand la page est chargée, la boîte de diapositives après quelques secondes, alors si la case n'est pas utilisée, elle glisse vers le haut après quelques secondes. À ce stade, le lien peut être cliqué pour faire la boîte, faites glisser vers le haut ou vers le bas en fonction de sa position actuelle.

Tout obtenir de l'aide de ces deux travailler en combinaison est très apprécié 🙂

OriginalL'auteur Paul | 2013-06-26

  1. 6

    Vous pouvez utiliser délai d'expiration des fonctions:

    Exemple De Travail

    $(document).ready(function () {
    var timer;
    $('.slide-out-div').slideDown('slow', function () {
        timer = setTimeout(function () {
            $('.slide-out-div').slideUp("slow");
        }, 5000);
    });
    $('#clickme').click(function () {
        if ($('.slide-out-div').is(":hidden")) {
            $('.slide-out-div').slideDown('slow', function () {
                timer = setTimeout(function () {
                    $('.slide-out-div').slideUp("slow");
                }, 5000);
            });
        } else {
            $('.slide-out-div').slideUp('slow');
            clearTimeout(timer);
        }
    });
});
    Merci pour les commentaires, mais il ne semble pas fonctionner correctement. Lorsque le lien est cliqué, la boîte glisse vers le bas et vers l'arrière jusqu'à, j'ai trouvé cela se passe aussi à votre exemple, si vous jouez avec elle pendant une minute.
    ne voulez-vous la div à glisser après un certain temps après cliquez sur? ou avez-vous été à la recherche de quelque chose de plus comme celle - ci, jsfiddle.net/apaul34208/SW6Mv/3
    désolé j'ai oublié d'effacer l'expiration voir mise à jour

    OriginalL'auteur apaul

  2. 1

    utiliser la fonction de rappel -

    $('.slide-out-div')
    .delay(5000)
    .slideDown(300, function () {
    $('.slide-out-div')        //execute when slideDown is complete
        .delay(5000)
        .slideUp(500);
});
    $('#clickme').click(function () {
    if ($('.slide-out-div').is(":hidden")) {
        $('.slide-out-div').end().slideDown("slow");
    } else {
        $('.slide-out-div').end().slideUp("slow");
    }
});
    Merci pour votre réponse. Mais ce qui semble être une alternative de temps faites glisser le script, il n'intègre pas l'événement click.
    voir mise à jour de la réponse, essayez que.
    Merci pour la mise à jour. Le nouveau script permet à l'événement de clic, mais cesse de l'événement chronométré de fonctionnement. C'est là où j'ai été tourner en rond 🙁

    OriginalL'auteur Mohammad Adil

  3. 1

    Avez-vous essayé .clearQueue()?

    $(document).ready(function () {
    var slideOut = $('.slide-out-div'), //cache DOM lookup
        tease = function () { //functionize this, in case you want to re-use it
            slideOut.slideDown(300);
            slideOut.delay(5000).slideUp(500);
        };
    $('#clickme').click(function (e) {
        /*
         * clearQueue() clears the [default] animation queue
         * so the slide-out div will behave correctly
         * if #clickme is clicked while tease() is running.
         */
        if (slideOut.is(":hidden")) {
            slideOut.clearQueue().slideDown("slow");
        } else {
            slideOut.clearQueue().slideUp("slow");
        }
        e.preventDefault();
        return false;
    });
    tease(); //tease with the slide-out
});

    De travail de démonstration: http://jsfiddle.net/y5vGR/

    Je vous remercie. J'ai essayé ce script toutefois, lorsque vous cliquez sur le lien pour la boîte de glisser jusqu'à elle saute à l'caché position, puis glisse vers le bas de nouveau (comme si elle la boîte est masqué). J'ai copié le code, et vous ne savez pas quand ce qui se passe :S
    Est-ce qui se passe en coulisse ou lorsque vous avez essayé de l'intégrer dans votre code?

    OriginalL'auteur pete

  4. 0

    Essayez ce simple code pour basculer 

        <div class="panel">
            <br />
            <br />
            <p>The panel text or login and registraion form goes here....</p>
            <p>sanwebcorner.com</p>
            </div>
            <p class="slide"><a href="#" class="pull-me">Slide Up/Down</a></p>



$(document).ready(function() {
    $('.pull-me').click(function() {
        $('.panel').slideToggle('slow');
    });
});

    Le Lien De Démonstration

    OriginalL'auteur M. Lak