CODEWITHSUNDEEP
jquerytwitter-bootstrapanimation
Paolo Rossi
Paolo Rossi

Reputation: 2510

Jquery add animation to add/removeClass and clone/remove elements

I'd like to add an animation (possibly the same) to the add/removeClass and clone/remove elements. For the add/removeClass function I tried to use the bootstrap class "fade in" (with no success). For clone/remove elements I tried to use hide/show (success only remove)

HTML

<!-- CLONE BTN -->
<div class="row cust-gutters">
    <div class="col-md-12">
        <span id="cloneRow" class="label label-primary pointer">
            Add <span class="glyphicon glyphicon-plus"></span>
        </span>
    </div>
</div>

<div class="clonable-row-label hide fade">
    <div class="row">
        <div class="col-md-4">
            <label class="control-label" for="phone">Phone</label>
        </div>
    </div>
</div>
<div class="clonable-row hide fade">
    <div class="row">
        <div class="col-md-4">
            <div class="input-group">
                <input type="text" class="form-control input-sm" name="phone[]" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-trash deleteRow" aria-hidden="true"></span>
                </span>
            </div>
        </div>
    </div>
</div>

JS

$("#cloneRow").on('click', function() {
    var num = $(".clonable-row").length;
    if($(".clonable-row:first").hasClass("hide")) {
        $(".clonable-row:first, .clonable-row-label").addClass("in");
        $(".clonable-row:first, .clonable-row-label").removeClass("hide");
    } else {
        if(num < 4) {
            //var row = $('.clonable-row:first').clone(true);
            //row.insertAfter('.clonable-row:last').show().fadeIn(600);
            $(".clonable-row:first").clone(true).insertAfter(".clonable-row:last");
        }
    }
});

$(".deleteRow").on('click', function() {
    var num = $(".clonable-row").length;
    if(num == 1) {
        $('.clonable-row-label').addClass("hide").removeClass("in");
        $(this).closest('.clonable-row').addClass("hide").removeClass("in");
    } else {
        $(this).closest('.clonable-row').hide(600, function() {
            $(this).closest('.clonable-row').remove();
        });
    }
});

How could I do it? Thank You

JSFIDDLE

Upvotes: 0

Views: 642

Answers (2)

gabrielprc
gabrielprc

Reputation: 111

jQuery UI provides animated versions of .addClass() and removeClass().

As for animating when showing an element, you should go with fadeIn(), as you have. Be aware that fadeIn() ALREADY shows() such element, so doing something like $(element).show().fadeIn() is pointless, as when fadeIn() begins, the element will be already displayed, and $(element).fadeIn().show() is also pointless, as fadeIn(), on completion, will already fully display the element.

The problem with the following snippet is conceptual:

$(this).closest('.clonable-row').hide(600, function() {
    $(this).closest('.clonable-row').remove();
});

It should go this way:

$(this).closest('.clonable-row').hide(600, function() {
    // Note here that $(this) is already the element (jQuery-wrapped) you called .hide() on
    $(this).remove();
});

EDIT

For your specific case, inserting the cloned element, you should hide it before inserting it in your HTML:

$(".clonable-row:first").clone(true).hide().insertAfter(".clonable-row:last").fadeIn();

Upvotes: 2

frank 500
frank 500

Reputation: 41

You should use:

$(".clonable-row:first").clone(true).insertAfter(".clonable-row:last").hide().fadeIn(600);

Upvotes: 1

Related Questions