Programim dhe zhvillim, javascript, python, php, html

Jquery shtoni animacion për të shtuar/hequrClass dhe për të klonuar/hequr elementë

Unë do të doja të shtoja një animacion (ndoshta të njëjtin) te elementet add/removeClass dhe klon/hiq. Për funksionin add/removeClass u përpoqa të përdor klasën bootstrap "fade in" (pa sukses). Për klonimin/heqjen e elementeve u përpoqa të përdor hide/shfaq (fshirje me sukses vetëm)

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();
        });
    }
});

Si mund ta bëja? Faleminderit

JSFIDDLE

animation jquery twitter-bootstrap
19.03.2015

Përgjigjet:


1

jQuery UI ofron versione të animuara të .addClass() dhe removeClass().

Sa i përket animimit kur shfaqni një element, duhet të shkoni me fadeIn(), siç keni. Kini parasysh se fadeIn() tashmë tregon() një element të tillë, kështu që të bësh diçka si $(element).show().fadeIn() është e kotë, pasi kur fillon fadeIn(), elementi do të shfaqet tashmë dhe $(elementi .fadeIn().show() është gjithashtu e pakuptimtë, pasi fadeIn(), pas përfundimit, tashmë do të shfaqë plotësisht elementin.

Problemi me fragmentin e mëposhtëm është konceptual:

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

Duhet të shkojë në këtë mënyrë:

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

EDITO

Për rastin tuaj specifik, duke futur elementin e klonuar, duhet ta fshehni përpara se ta futni në HTML-në tuaj:

$(".clonable-row:first").clone(true).hide().insertAfter(".clonable-row:last").fadeIn();
19.03.2015
  • Tani animacioni i klonit është i përsosur! Por unë kam ende probleme me animimin e add/removeclass me jquery ui jsfiddle.net/oagw16hc/13 Tnahks 19.03.2015
  • Këtu shkon: Rreshti 18 i fyellit tuaj shton klasën hide në një div që është një kontejner i .clonable-row-label që po zgjidhni: $(this).closest('.clonable-row').addClass("hide"); Problemi këtu është se div e jashtme do të fshihet menjëherë, kur .addClass() e animuar në .clonable-row-label nuk do të ketë përfunduar. Kjo linjë duhet të jetë në një thirrje mbrapsht (në përfundim) të thirrjes së animuar në .addClass(). 19.03.2015

    • 2

    Ju duhet të përdorni:

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

    19.03.2015
  • Unë kam bërë një test, në përsëritjen e dytë (e kam shtuar testin tim në një tjetër), këtu: jsfiddle. net/oagw16hc/11 19.03.2015
    • Materiale të reja
    Masterclass Coroutines: Kapitulli-3: Anulimi i korutinave dhe trajtimi i përjashtimeve.
    Mirë se vini në udhëzuesin gjithëpërfshirës mbi Kotlin Coroutines! Në këtë seri artikujsh, unë do t'ju çoj në një udhëtim magjepsës, duke filluar nga bazat dhe gradualisht duke u thelluar në..
    Faketojeni derisa ta arrini me të dhënat false
    A e gjeni ndonjëherë veten duke ndërtuar një aplikacion të ri dhe keni nevojë për të dhëna testimi që duken dhe duken më realiste ose një grup i madh të dhënash për performancën e ngarkesës...
    Si të përdorni kërkesën API në Python
    Kërkesë API në GitHub për të marrë depot e përdoruesve duke përdorur Python. Në këtë artikull, unë shpjegoj procesin hap pas hapi për të trajtuar një kërkesë API për të marrë të dhëna nga..
    Një udhëzues hap pas hapi për të zotëruar React
    Në këtë artikull, do të mësoni se si të krijoni aplikacionin React, do të mësoni se si funksionon React dhe konceptet thelbësore që duhet të dini për të ndërtuar aplikacione React. Learning..
    AI dhe Psikologjia — Pjesa 2
    Në pjesën 2 të serisë sonë të AI dhe Psikologji ne diskutojmë se si makineritë mbledhin dhe përpunojnë të dhëna për të mësuar emocione dhe ndjenja të ndryshme në mendjen e njeriut, duke ndihmuar..
    Esencialet e punës ditore të kodit tim VS
    Shtesat e mia të preferuara - Git Graph 💹 Kjo shtesë është vërtet e mahnitshme, e përdor përpara se të filloj të punoj për të kontrolluar dy herë ndryshimet dhe degët më të fundit, mund të..
    Pse Python? Zbulimi i fuqisë së gjithanshme të një gjiganti programues
    Në peizazhin gjithnjë në zhvillim të gjuhëve të programimit, Python është shfaqur si një forcë dominuese. Rritja e tij meteorike nuk është rastësi. Joshja e Python qëndron në thjeshtësinë,..