Mi sitio tiene 30 preguntas. Cada pregunta está en un div. Todos los divs se muestran: ninguno, excepto el que se muestra. Una vez que se responde una pregunta, paso a la siguiente pregunta, configurando todas las preguntas para mostrar: ninguna y mostrar: bloque en el div que contiene la siguiente pregunta. Hasta ahora, nada nuevo.
En stackoverflow, recientemente vi una pregunta con este violín . Sería maravilloso si pudiera usar ese efecto para deslizar hacia arriba la pregunta respondida. Empujado hacia arriba, por así decirlo, por la siguiente pregunta que cambia convenientemente a la vista.
Desafortunadamente, tan pronto como ya no pasa el cursor sobre la pregunta, la pregunta anterior se muestra nuevamente, por lo que el efecto no dura. Traté de hacerlo permanente para crear la sensación de un cuestionario que se desplaza literalmente hacia arriba y hacia abajo ante tus ojos. Pero fracasé miserablemente.
He visto Bootstraps Carousel, que casi hace lo que quiero, pero no quiero que las preguntas sean imágenes y mi script PHP debería poder determinar la siguiente pregunta. Entonces, la siguiente pregunta no está determinada por el orden en que apilé las preguntas.
¿Es posible mi idea usando css3, javascript y/o jQuery?
* { box-sizing: border-box; } .container { width: 200px; height: 150px; overflow: hidden; position: relative; } .slide { position: absolute; top: 0; transition: all 1s; } .slide:hover { top: -150px; } .content { width: 200px; height: 150px; padding: 10px; } #first { background-color: #C00; } #second { background-color: #0C0; } #third { background-color: #00C; } #fourth { background-color: #CC0; } <div class="container"> <div class="slide"> <div class="content" id="first"> Question 1 </div> <div class="content" id="second"> Question 2 </div> </div> </div> <br /> <div class="container"> <div class="slide"> <div class="content" id="third"> Question 3 </div> <div class="content" id="fourth"> Question 4 </div> </div> </div>Con CSS podrás animar el elemento con el efecto slideUp que quieras. Pero, necesita JS para controlar qué pregunta se muestra realmente.
El CSS :hover lo dice todo, cuando pasa el cursor sobre el elemento, toma ese estilo css y se aplica, cuando no está pasando el cursor, esos atributos ya no están activos en el elemento.
A continuación, hay un código que puede ayudarlo a seguir adelante con su lógica.
Qué he hecho:
let currentQuestion = 1; let questionsAmmount = 4; function slideUp() { if (currentQuestion < questionsAmmount) { let slide = document.querySelector('.slide') slide.style.top = currentQuestion * 150 * -1 + 'px'; currentQuestion++; } } document.getElementById("nextQuestionButton").onclick = slideUp; * { box-sizing: border-box; } .container { width: 200px; height: 150px; overflow: hidden; position: relative; } .slide { position: absolute; top: 0; transition: all 1s; } .content { width: 200px; height: 150px; padding: 10px; } #first { background-color: #C00; } #second { background-color: #0C0; } #third { background-color: #00C; } #fourth { background-color: #CC0; } <div class="container"> <div class="slide"> <div class="content" id="first"> Question 1 </div> <div class="content" id="second"> Question 2 </div> <div class="content" id="third"> Question 3 </div> <div class="content" id="fourth"> Question 4 </div> </div> </div> <button id="nextQuestionButton">Next></button>Como mencionó el respondedor anterior, el problema con su código estaba tratando de implementar usando solo el selector :hover . El selector :hover solo aplica el estilo deseado cuando se desplaza sobre el objetivo especificado.
Aquí hay otra solución que usa jQuery. El progreso de las preguntas se rastrea usando dos clases, .active y .finished , y las preguntas continúan al hacer clic. Al final de la secuencia, se eliminan todas las clases .active y .finished y se asigna .active a la primera pregunta para reiniciar la secuencia.
$(function() { // on document ready set the first question to active $('.slide .content:first-child').toggleClass('active'); // when the question box is clicked $('.slide .content').click(function() { // remove the active class from the current question and add finished class $(this).removeClass('active'); $(this).addClass('finished'); // add the active class to the following question $(this).next('.content').addClass('active'); // if there are no more questions return to the first if ($(this).next('.content').length == 0) { $('.slide .content').removeClass('finished'); $('.slide .content:first-child').toggleClass('active'); } }); }); * { box-sizing: border-box; } .container { width: 200px; height: 150px; overflow: hidden; position: relative; } .content { width: 200px; height: 150px; padding: 10px; position: absolute; top: 150px; /* upcoming questions come from below */ transition: all 1s; } .content.active { top: 0; /* current question is at top */ } .content.finished { top: -150px; /* move finished questions up */ } #first { background-color: #C00; } #second { background-color: #0C0; } #third { background-color: #00C; } #fourth { background-color: #CC0; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="container"> <div class="slide"> <div class="content" id="first"> Question 1 </div> <div class="content" id="second"> Question 2 </div> <div class="content" id="third"> Question 3 </div> <div class="content" id="fourth"> Question 4 </div> </div> </div>