Jquery diapositiva div alto dalla parte inferiore della pagina

Finora, ho un div fissato al fondo della pagina, con il margine inferiore impostato per un meno il numero, in modo da nascondere la maggior parte di esso sotto lo schermo. Mi piacerebbe creare un Jquery pulsante che ha fatto di tutto far scorrere in alto sulla pagina, ma tutto quello che ho provato finora non ha funzionato. Io non sono così esperto, quindi probabilmente ho fatto worng.

Comunque, ecco il mio CSS:

.foot {
    border-top: 1px solid #999999;
    position:fixed;
    width: 600px;
    z-index: 10000;
    text-align:center;
    height: 500px;
    font-size:18px;
    color: #000;
    background: #FFF;
    display: flex;
    justify-content: center; /* align horizontal */
    border-top-left-radius:25px;
    border-top-right-radius:25px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    bottom: -475px;
}

E il mio HTML:

<div class="foot">
Copyright 2014 &copy; Tom Gibbs web design. <div class="clocker">hi</div>
<br />
<br />
Line 1<br />
Line 2<br />
Line 3<br />
Line 4
</div>

Codice che ho già provato. Appena fatto il div scivolare fuori dalla pagina:

<script>
$(document).ready(function(){
  $(".clocker").click(function(){
    $(".foot").slideUp(2000);
  });
});
</script>
Dove è Jquery codice?
Come ho detto, non ho potuto ottenere qualcosa di anche lontanamente vicino, ma ho aggiunto il codice che ho già provato in una modifica
Che era l’unica Jquery che ho provato finora. Il resto erano tutti CSS tricks che ha funzionato, ma non molto bene. Preferisco usare Jquery comunque
Invece di scivolare fino a rivelare il resto del contenuto all’interno del piè di pagina, non funziona meglio se ci fosse un contenitore separato/modale che farebbe scorrere fino? In questo modo, è possibile lasciare il piè di pagina da solo e far scorrere il contenitore di altri/modale a seconda delle necessità.
Beh, ora come ora, sto usando il addClass funzione per aggiungere una classe che rimuove il margine inferiore con un clic. Funziona, ma non riesco a farlo andare giù di nuovo

OriginaleL’autore MyNameWouldGoHere | 2014-08-07

3 Replies
  1. 8

    Se tu fossi un’altra classe:

    .slide-up
    {
        bottom: 0px !important;
    }
    
    .slide-down
    {
        bottom: -475px !important;
    }

    che si poteva aggiungere clic:

    $(document).ready(function() {
      $('.foot').click(function() {
          if($('.foot').hasClass('slide-up')) {
            $('.foot').addClass('slide-down', 1000, 'easeOutBounce');
            $('.foot').removeClass('slide-up'); 
          } else {
            $('.foot').removeClass('slide-down');
            $('.foot').addClass('slide-up', 1000, 'easeOutBounce'); 
          }
      });
    });

    Assicurarsi che si dispone di jQuery UI importato per primo.

    Aggiornato JSFiddle

    Che funziona abbastanza bene, grazie. Sarebbe difficile farlo andare giù di nuovo, se l’utente fa clic di nuovo?
    Certo, fisso. Inoltre, si può pasticciare con jQuery UI dell’andamento diverso tipi, non solo il rimbalzo di una
    Ho come l’effetto di rimbalzo. Realmente non ho usato questi Jquery UI effetti prima, ma di sicuro mi sto per ora!
    Più brevi e $(function() { $(‘#dev-modulo-barra degli strumenti’).click(function() { if($(this).hasClass(‘slide-up’)) { $(this).toggleClass(‘slide-down”, “slide-up”); } else { $(this).toggleClass(‘slide-up”, “slide-in basso’); } }); });

    OriginaleL’autore Senju

  2. 4

    Credo che questo è qualcosa che si desidera: DEMO

    $(document).ready(function(){
      $(".clocker").click(function(){
          $(".foot").animate({bottom:'300px'},1000);
      });
    });

    Ho fatto alcuni cambiamenti nel vostro Css:

    .foot {
        border-top: 1px solid #999999;
        position:fixed;
        width: 600px;
        z-index: 10000;
        text-align:center;
        /*height: 500px;*/
        font-size:18px;
        color: #000;
        background: #FFF;
        display: flex;
        justify-content: center; /* align horizontal */
        border-top-left-radius:25px;
        border-top-right-radius:25px;
        right: 0;
        left: 0;
        margin-right: auto;
        margin-left: auto;
        bottom: 0;
    }

    Aggiornamento

    Se volete chiudere anche Vedere la DEMO Aggiornata

    $(document).ready(function(){
      $(".clocker").click(function(){
          if($(".foot").css('bottom') == '0px'){
              $(".foot").animate({bottom:'300px'},1000);
          }
          else
          {
              $(".foot").animate({bottom:'0px'},1000);
          }
    
      });
    });
    Il demo originale potrebbe fare con un <button class='clocker'>Click</button> in html 😉

    OriginaleL’autore Manwal

  3. 0

    Tris ha funzionato per me (copia e incolla nel tuo editor di codice):

    <!DOCTYPE html>
            <html>
            <head>
                <title>Slide Up</title>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
            </head>
    
            <style type="text/css">
                .container {
                    position: absolute;
                    top:0px;
                    left:0px;
                    bottom:0px;
                    right:0px;
                    width:80%;
                    height:600px;
                    border:1px solid black;
                    margin:auto;
                }
    
                .menuB{
                    position:absolute;
                    width:100%;
                    height:0;
                    left:0;
                    bottom:0;
                    /*transform-origin:100% 100%;*/
                    background:#2196F3;
                    opacity:0;
                    overflow:hidden;
                }
    
                .clickMe{
                    position: absolute;
                    margin-top: 0;
                    right: 0;
                    width: 100%;
                    height: 30px;
                    background-color: #2196F3;
                    color: white;
                    text-align: center;
                    cursor: pointer;
                }
            </style>
            <body>
    
                <div class="container">
                    <div class="menuB">
    
                    </div>
    
                    <p class="clickMe">Click</p>
                </div>
    
                <script type="text/javascript">
                        var opacity_status = false;
                    $('.clickMe').on('click', function () {
                        //body...
                        if (opacity_status === false) {
                            $('.menuB')
                               .animate({
                                   opacity: 1
                               }, 100)
                               .animate({
                                   height: '250px'
                               }, 1500 );
                            opacity_status = true;
                        }else{
                            $('.menuB')
                               .animate({
                                  height : 0
                               }, 1500)
                               .animate({
                                   opacity: 0
                               }, 2000 );
                            opacity_status = false;
                        }
    
                    });
                </script>
    
            </body>
            </html>

    OriginaleL’autore Baraka Mahili

Lascia un commento