Becky Becky - 4 months ago 11
jQuery Question

How to get an input set to display block to fade in with css

I am stuck and have looked all over for a solution for this. On page load I have my inputs

opacity: 0
and then full opacity later, but I need the inputs to display as block in order for them to go down the page instead of inline. Doing this is counteracting the fade in I have with the
.block
class. Is there anyway I can get the inputs to be in a block fashion and still fade in with css?

Also, is there a way in my example to get the labels/inputs to display block so that the label is over the input and they are centered on the page?

This fiddle demonstrates it best



$(function() {
var elems = $('.intro input').on('keypress', function() {

if ($(this).val().trim().length > 2) {
$(this).parent().next('label').addClass('block');
}


$('#intro-button').toggle(
elems.filter(function() {
return this.value.trim() !== "";
}).length === elems.length
)

});
});

.intro {
opacity: 0;
}
.info-input {
padding: 10px 15px;
margin: 40px auto;
}
.intro:first-child {
display: block;
opacity: 1;
}
.block {
display: block;
visability: visible;
opacity: 1;
-webkit-animation: fadein 1s ease-in;
-moz-animation: fadein 1s ease-in;
animation: fadein 1s ease-in;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="intro">What is your name?
<input id="name" type="text" class="info-input">
</label>
<label class="intro">What is your email address?
<input id="email" type="email" class="info-input">
</label>
<label class="intro">What is your title?
<input id="title" type="text" class="info-input">
</label>




Answer

Change "animation" to "transition" on ".block"

    .block {
      display: block;
      visability: visible;
      opacity: 1;
      -webkit-transition: opacity 1s ease-in;
      -moz-transition: opacity 1s ease-in;
      transition: opacity 1s ease-in;
    }

fiddle