CODEWITHSUNDEEP
jquerytwitter-bootstrapanimation
InnovativeDan
InnovativeDan

Reputation: 1107

jQuery Show Animation

I'm working on a site and using Bootstrap and jQuery.

It's kind of impossible to explain my problem in words, so I've uploaded a gif showing my problem: Link here

I've created a fiddle as well: JFiddle Demo

Basically, that error alert box is a Bootstrap template and I am trying to animate it using jQuery's show('shake'); but the problem is, there seems to be some problem with the animation, the div only expand for the text AFTER the animation.

These are my codes for it:

<div class="alert alert-danger" id="errorBox" style="display:none; padding:15px;">
</div>

-

<script type="text/javascript">
        $(document).ready(function () {
            $('#signIn').submit(function (e) {
                if ($('#tbxUsername').val().length == 0) {
                    $('#errorBox').html('<strong>Error:</strong> You need to enter your username!');
                    $('#errorBox').hide().show('shake');
                    return false;
                } else if ($('#tbxPassword').val().length == 0) {
                    $('#errorBox').html('<strong>Error:</strong> You need to enter your password!');
                    $('#errorBox').hide().show('shake');
                    return false;
                }
            });
        });
    </script>

Anyone know what is happening?

Upvotes: 1

Views: 253

Answers (1)

Amit Joki
Amit Joki

Reputation: 59252

shake is not part of jquery core. You'll need to download it form jquery-ui effects, to use it in your code.

Natively, only fading and sliding is supported.

After edit:

It seems a bug. You can workaround that by adding style="min-height:55px;" to your div

Demo

Upvotes: 2

Related Questions