CODEWITHSUNDEEP
jqueryhtmlcss
NigelMNZ
NigelMNZ

Reputation: 113

jQuery: Animation with hidden input fields

An attempt can be seen in this fiddle.

I'm trying to fade in a hidden text field through animation. The text field is sandwiched between another field and a button. I'd like it to smoothly move all other elements, then fade in/out the hidden element. However, in the attempt above, it seems to abruptly move near the end or beginning of the animation.

HTML 

<input>
<div>
    <input id="hidden_field">
</div>
<button type="button" id="show" class="btn">Toggle</button>

CSS

#hidden_field{
    display: none;
}

JS

$(document).ready(function(){

var isUp = true;
$('#show').on('click', function(){

    if(isUp){        
        $('#hidden_field').css({opacity:0}).slideDown("slow").animate({opacity:1});
        isUp = false;
    }else{
        $('#hidden_field').animate({opacity:0}).slideUp("slow");
        isUp = true;
    }

});
});

Oddly, it works fine if I replace the hidden field with something like a hidden div. I'd appreciate any help I can get.

Upvotes: 1

Views: 1669

Answers (2)

Diode
Diode

Reputation: 25155

Either do what @Max suggests or wrap each input using divs. When you mix elements you should be aware of how the default display property of various elements affect the layout. 

<div id="visibleWrapper">
    <input>
</div>
<div id="hiddenWrapper">
    <input id="hidden_field">
</div>

#hiddenWrapper{
    display: none;
}


$(document).ready(function () {
    var isUp = true;
    $('#show').on('click', function () {

        if (isUp) {
            $('#hiddenWrapper').css({
                opacity: 0
            }).slideDown("slow").animate({
                opacity: 1
            });
            isUp = false;
        } else {
            $('#hiddenWrapper').animate({
                opacity: 0
            }).slideUp("slow");
            isUp = true;
        }

    });
});

http://jsfiddle.net/5Fkvv/24/

Upvotes: 2

MaX
MaX

Reputation: 1805

I think it' because it's surrounded by the div. This suddenly gets content, but is not styled or animated to handle it, so it springs into form, then adjusts. You can try removing the div, then keeping input under each other with

input, button { float:left; clear:both; }

http://jsfiddle.net/5Fkvv/19/

Upvotes: 1

Related Questions