Transizione testo opacità dall'alto verso il basso

Question

Ho un div, con un dato height, che passa a un più grande height utilizzando jQuery. La transizione a più alto div viene livellata con l'elemento transition. Poiché la transizione di espansione div è linear, con un ritardo di 0,5 s, uso anche transition per spostare 7 righe di testo da opacity: 0 a opacity:1. Tuttavia, voglio che questa transizione vada dall'alto verso il basso (linea 1 un po 'più veloce della linea 2, un po' più veloce della linea 3, ecc.), Dopo la transizione div, anziché tutte le linee contemporaneamente. Come farlo? Codice qui sotto:

$("small").on("click", function() { 
 
     $(".post1").toggleClass("show-post"); 
 
    }); 
 
    
 

.post1 { 
 
    border: 1px solid grey; 
 
    margin: 20px auto; 
 
    width:33%; 
 
    height:125px; 
 
    padding:0 10px; 
 
    border-radius:4px; 
 
    background:#FFFFFF; 
 
    color:black; 
 
    transition: height 0.5s; 
 
    -webkit-transition: height 0.5s; 
 
    -moz-transition: height 0.5s; 
 
} 
 

 
.descr { 
 
    opacity:0; 
 
} 
 

 
small { 
 
    position:relative; 
 
    left:300px; 
 
    bottom:30px; 
 
} 
 

 
.show-post { 
 
    height:350px; 
 
} 
 

 
.show-post .descr{ 
 
    opacity:1; 
 
    transition:opacity 1s linear; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="post1"> 
 
    <h4>THis is a concert</h4> 
 
    <p>Where: XYZ Arena</p> 
 
    <p>When: XYZ h</p> 
 
    <small>(Click to expand)</small> 
 
    <p class="descr">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 

Aggiornamento:

Ora il mio codice è simile:

<script> 
 
    $("small").on("click", function() { 
 
     $(this).parent().toggleClass("show-post"); 
 
     $(".first").animate({'opacity':1}, 1000); 
 
     $(".second").animate({'opacity':1}, 2000); 
 
     $(".third").animate({'opacity':1}, 3000); 
 
     $(".fourth").animate({'opacity':1}, 4000); 
 
     $(".fifth").animate({'opacity':1}, 5000); 
 
     $(".sixth").animate({'opacity':1}, 6000); 
 
     $(".seventh").animate({'opacity':1}, 7000); 
 
     $(".eight").animate({'opacity':1}, 8000); 
 
    }); 
 
    
 
    </script>

.descr { 
 
    opacity:0; 
 
} 
 

 
.first, .second, .third { 
 
    opacity:0; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="post"> 
 
    <h4>THis is a concert</h4> 
 
    <p>Where: XYZ Arena</p> 
 
    <p>When: XYZ h</p> 
 
    <small>(Click to expand)</small> 
 
    <p class="descr"> 
 
     <div class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </div><div class="second">do eiusmod temporincididunt ut labore et dolore magna </div><div class="third">aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div><div class="fourth"> ullamco laboris nisi ut aliquip ex ea commodo consequat.</div><div class="fifth"> Duis aute irure dolor in reprehenderit in voluptate velit esse </div><div class="sixth">cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat </div><div class="seventh">cupidatat non proident, sunt in culpa qui officia deserunt mollit </div><div class="eight">anim id est laborum.</div> 
 
    </p> 
 
    </div>

non ho ancora aggiunto tutto 0.123.nel codice css ma posso vedere che funziona perché posso impostare un diverso timing per ogni transizione per ogni riga. Ora, ecco una domanda da principiante: come posso selezionare tutti i div in .descr senza dover creare un elemento css in più e fare riferimento a ogni singolo .class sotto: .first, .second, .third. Provato .descr, div ma non funziona. Ed è una domanda così facile che nessuno lo chiede e, quindi, non riesce a trovare una risposta.

Answer 1

div p div selezionerà tutti i div in descrizione.

Edit: ho fatto una sezione (con il css ginocchiera e l'animazione ripetuto) che funziona

Ho usato i paragrafi invece di div per le linee e una sezione per tenere tutti in

$("small").on("click", function() { 
 

 
    $(this).parent().toggleClass("show-post"); 
 
    if ($(this).parent().hasClass ("show-post") && ($('.show-post').css('height') == '500px')) { 
 
    $(".first").animate({ 
 
     'opacity': 1 
 
    }, 1000); 
 
    $(".second").animate({ 
 
     'opacity': 1 
 
    }, 2000); 
 
    $(".third").animate({ 
 
     'opacity': 1 
 
    }, 3000); 
 
    $(".fourth").animate({ 
 
     'opacity': 1 
 
    }, 4000); 
 
    $(".fifth").animate({ 
 
     'opacity': 1 
 
    }, 5000); 
 
    $(".sixth").animate({ 
 
     'opacity': 1 
 
    }, 6000); 
 
    $(".seventh").animate({ 
 
     'opacity': 1 
 
    }, 7000); 
 
    $(".eight").animate({ 
 
     'opacity': 1 
 
    }, 8000); 
 

 
} else if (!$(this).parent().hasClass ("show-post")) { 
 
    $(".first").animate({ 
 
     'opacity': 0 
 
    }, 1000); 
 
    $(".second").animate({ 
 
     'opacity': 0 
 
    }, 2000); 
 
    $(".third").animate({ 
 
     'opacity': 0 
 
    }, 3000); 
 
    $(".fourth").animate({ 
 
     'opacity': 0 
 
    }, 4000); 
 
    $(".fifth").animate({ 
 
     'opacity': 0 
 
    }, 5000); 
 
    $(".sixth").animate({ 
 
     'opacity': 0 
 
    }, 6000); 
 
    $(".seventh").animate({ 
 
     'opacity': 0 
 
    }, 7000); 
 
    $(".eight").animate({ 
 
     'opacity': 0 
 
    }, 8000); 
 

 
} 
 
});

div section p { 
 
    opacity: 0; 
 
} 
 
.post { 
 
    border: 1px solid grey; 
 
    margin: 20px auto; 
 
    width:200px; 
 
    height:155px; 
 
    padding:0 10px; 
 
    border-radius:4px; 
 
    background:#FFFFFF; 
 
    color:black; 
 
    transition: height 0.5s; 
 
    -webkit-transition: height 0.5s; 
 
    -moz-transition: height 0.5s; 
 
    overflow:hidden; 
 
} 
 

 
.show-post { 
 
    height:500px; 
 
    opacity:1; 
 
    transition:opacity 1s linear; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="post"> 
 
    <h4>This is a concert</h4> 
 
    <p>Where: XYZ Arena</p> 
 
    <p>When: XYZ h</p> 
 
    <small>(Click to expand)</small> 
 
    <section class="descr"> 
 
    <p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</p> 
 
    <p class="second">do eiusmod temporincididunt ut labore et dolore magna</p> 
 
    <p class="third">aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p> 
 
    <p class="fourth">ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    <p class="fifth">Duis aute irure dolor in reprehenderit in voluptate velit esse</p> 
 
    <p class="sixth">cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p> 
 
    <p class="seventh">cupidatat non proident, sunt in culpa qui officia deserunt mollit</p> 
 
    <p class="eight">anim id est laborum.</p> 
 
    </section> 
 
</div>

.

ecco un fiddle