Cum de a simplifica aceste două blocuri de cod într-unul?

$(".button-wrap.enter-now").click(isMobile ?
    function(){
        window.location = 'form/form.html';
    }
    : function(){
        TweenMax.to($iframeBg, 0.35, {startAt:{top:0}, opacity:1 });
        TweenMax.to($("#form-wrapper"), 0.45, {top:"8%", delay:0.05, ease:Power3.easeOut, opacity:1});
});
$("#close-form").click(function(){
    TweenMax.to($("#form-wrapper"), 0.45, {opacity:0, top:"110%", ease:Power3.easeOut});
    TweenMax.to($iframeBg, 0.25, {opacity:0, delay:0.1});
    TweenMax.to($iframeBg, 0.01, {top:"120%", delay:0.45});
});

Am codul de mai sus pentru non-ie8s, și mai jos pentru ie8 - ele arată exact la fel cu excepția faptului că nu există opacitate în tweens:

if(ie8){
    $(".button-wrap.enter-now").click(isMobile ?
        function(){
            window.location = 'form/form.html';
        }
        : function(){
            TweenMax.to($iframeBg, 0.35, {startAt:{top:0} });
            TweenMax.to($("#form-wrapper"), 0.45, { top:"8%", delay:0.05, ease:Power3.easeOut});
    });
    $("#close-form").click(function(){
        TweenMax.to($("#form-wrapper"), 0.45, {top:"110%", ease:Power3.easeOut});
        TweenMax.to($iframeBg, 0.25, { delay:0.1});
        TweenMax.to($iframeBg, 0.01, {top:"120%", delay:0.25});
    });
}

Mă întreb, cum pot simplifica codul într-unul? Nici măcar nu știu ce să caut. Mulțumesc mult.

0
Ar trebui să căutați operatorul ternar.
adăugat autor Danny Beckett, sursa
@DannyBeckett: El deja o folosește sau o abuzează, aș spune ...
adăugat autor elclanrs, sursa
Folosind o instrucțiune if..else în schimb.
adăugat autor elclanrs, sursa
Ei bine, IMO este mai mult despre ceea ce este mai ușor de citit și de înțeles. Un operator ternar este bine pentru o expresie rapidă, dar aveți 7 linii acolo.
adăugat autor elclanrs, sursa
@DannyBeckett Vrei să spui expresia x? X: x? Știu asta. Dar cum pot extrage {opacitate: 1} din obiect?
adăugat autor Luxiyalu, sursa
@elclanrs: cum să nu-o abuzeze? Mulțumiri!
adăugat autor Luxiyalu, sursa
@elclanrs Îmi pare rău că tocmai am început să învăț, de ce e/altceva mai bine?
adăugat autor Luxiyalu, sursa
@elclanrs Îmi pare rău că tocmai am început să învăț, de ce e/altceva mai bine?
adăugat autor Luxiyalu, sursa
@elclanrs Corect. Mulțumiri.
adăugat autor Luxiyalu, sursa
@elclanrs Corect. Mulțumiri.
adăugat autor Luxiyalu, sursa

8 răspunsuri

De ce nu doar încapsulați opacitatea într-o instrucțiune if-other .

$(".button-wrap.enter-now").click(isMobile ? function(){
        window.location = 'form/form.html';
    }
    : function(){
        TweenMax.to($iframeBg, 0.35, {startAt:{top:0}, opacity:1 });
        TweenMax.to($("#form-wrapper"), 0.45, {top:"8%", delay:0.05, ease:Power3.easeOut, opacity:1});
});

$("#close-form").click(function(){
    TweenMax.to($("#form-wrapper"), 0.45, {opacity:0, top:"110%", ease:Power3.easeOut}); 
    if(ie8){
        TweenMax.to($iframeBg, 0.25, {delay:0.1});
    }else{
        TweenMax.to($iframeBg, 0.25, {opacity:0, delay:0.1});
    }
    TweenMax.to($iframeBg, 0.01, {top:"120%", delay:0.45});
});
0
adăugat

De ce nu doar încapsulați opacitatea într-o instrucțiune if-other .

$(".button-wrap.enter-now").click(isMobile ? function(){
        window.location = 'form/form.html';
    }
    : function(){
        TweenMax.to($iframeBg, 0.35, {startAt:{top:0}, opacity:1 });
        TweenMax.to($("#form-wrapper"), 0.45, {top:"8%", delay:0.05, ease:Power3.easeOut, opacity:1});
});

$("#close-form").click(function(){
    TweenMax.to($("#form-wrapper"), 0.45, {opacity:0, top:"110%", ease:Power3.easeOut}); 
    if(ie8){
        TweenMax.to($iframeBg, 0.25, {delay:0.1});
    }else{
        TweenMax.to($iframeBg, 0.25, {opacity:0, delay:0.1});
    }
    TweenMax.to($iframeBg, 0.01, {top:"120%", delay:0.45});
});
0
adăugat

De ce nu doar încapsulați opacitatea într-o instrucțiune if-other .

$(".button-wrap.enter-now").click(isMobile ? function(){
        window.location = 'form/form.html';
    }
    : function(){
        TweenMax.to($iframeBg, 0.35, {startAt:{top:0}, opacity:1 });
        TweenMax.to($("#form-wrapper"), 0.45, {top:"8%", delay:0.05, ease:Power3.easeOut, opacity:1});
});

$("#close-form").click(function(){
    TweenMax.to($("#form-wrapper"), 0.45, {opacity:0, top:"110%", ease:Power3.easeOut}); 
    if(ie8){
        TweenMax.to($iframeBg, 0.25, {delay:0.1});
    }else{
        TweenMax.to($iframeBg, 0.25, {opacity:0, delay:0.1});
    }
    TweenMax.to($iframeBg, 0.01, {top:"120%", delay:0.45});
});
0
adăugat

Doar căutați modele în codul dvs. și rearanjați. De exemplu, aveți un element cu un ascultător de clicuri; o dată. Aveți același control pentru mobil când faceți clic; o dată. etc .. Deci, pentru .button-wrap.enter-now ai putea avea o funcție cu ceva de genul:

$(".button-wrap.enter-now").click(function(){
  if(isMobile){
    window.location = 'form/form.html';
  }else if(ie8){
    TweenMax.to($iframeBg, 0.35, {startAt:{top:0} });
    TweenMax.to($("#form-wrapper"), 0.45, { top:"8%", delay:0.05, ease:Power3.easeOut});
  }else{
    TweenMax.to($iframeBg, 0.35, {startAt:{top:0}, opacity:1 });
    TweenMax.to($("#form-wrapper"), 0.45, {top:"8%", delay:0.05, ease:Power3.easeOut, opacity:1});
  }
});

De asemenea, puteți combina aceste coduri TweenMax chiar mai departe, dar am vrut să o păstrez mai simplă și sper să obțineți esența. Acum ar trebui să puteți face același lucru și pentru agentul dvs. de formare a clicurilor # close-form .

0
adăugat

Doar căutați modele în codul dvs. și rearanjați. De exemplu, aveți un element cu un ascultător de clicuri; o dată. Aveți același control pentru mobil când faceți clic; o dată. etc .. Deci, pentru .button-wrap.enter-now ai putea avea o funcție cu ceva de genul:

$(".button-wrap.enter-now").click(function(){
  if(isMobile){
    window.location = 'form/form.html';
  }else if(ie8){
    TweenMax.to($iframeBg, 0.35, {startAt:{top:0} });
    TweenMax.to($("#form-wrapper"), 0.45, { top:"8%", delay:0.05, ease:Power3.easeOut});
  }else{
    TweenMax.to($iframeBg, 0.35, {startAt:{top:0}, opacity:1 });
    TweenMax.to($("#form-wrapper"), 0.45, {top:"8%", delay:0.05, ease:Power3.easeOut, opacity:1});
  }
});

De asemenea, puteți combina aceste coduri TweenMax chiar mai departe, dar am vrut să o păstrez mai simplă și sper să obțineți esența. Acum ar trebui să puteți face același lucru și pentru agentul dvs. de formare a clicurilor # close-form .

0
adăugat

Ceva de genul asta, folosiți variabilele pentru a ține obiectele și setați opacitatea dacă este detectat IE8.

$(".button-wrap.enter-now").click(isMobile ?
    function(){
        window.location = 'form/form.html';
    }
    : function(){
        var attrA = {startAt:{top:0}};
        var attrB = {top:"8%", delay:0.05, ease:Power3.easeOut};
        if (ie8 /* In case ie8 is not working for you: $.browser.msie  && parseInt($.browser.version, 10) === 8*/) {
            attrA.opacity = 1;
            attrB.opacity = 1;
        }
        TweenMax.to($iframeBg, 0.35, attrA);
        TweenMax.to($("#form-wrapper"), 0.45, attrB);
});
$("#close-form").click(function(){
    var attrA = {top:"110%", ease:Power3.easeOut};
    var attrB = {delay:0.1};
    if (ie8) {
        attrA.opacity = 0;
        attrB.opacity = 0;
    }
    TweenMax.to($("#form-wrapper"), 0.45, attrA);
    TweenMax.to($iframeBg, 0.25, attrB);
    TweenMax.to($iframeBg, 0.01, {top:"120%", delay:0.45});
});
0
adăugat

Ceva de genul asta, folosiți variabilele pentru a ține obiectele și setați opacitatea dacă este detectat IE8.

$(".button-wrap.enter-now").click(isMobile ?
    function(){
        window.location = 'form/form.html';
    }
    : function(){
        var attrA = {startAt:{top:0}};
        var attrB = {top:"8%", delay:0.05, ease:Power3.easeOut};
        if (ie8 /* In case ie8 is not working for you: $.browser.msie  && parseInt($.browser.version, 10) === 8*/) {
            attrA.opacity = 1;
            attrB.opacity = 1;
        }
        TweenMax.to($iframeBg, 0.35, attrA);
        TweenMax.to($("#form-wrapper"), 0.45, attrB);
});
$("#close-form").click(function(){
    var attrA = {top:"110%", ease:Power3.easeOut};
    var attrB = {delay:0.1};
    if (ie8) {
        attrA.opacity = 0;
        attrB.opacity = 0;
    }
    TweenMax.to($("#form-wrapper"), 0.45, attrA);
    TweenMax.to($iframeBg, 0.25, attrB);
    TweenMax.to($iframeBg, 0.01, {top:"120%", delay:0.45});
});
0
adăugat

Ceva de genul asta, folosiți variabilele pentru a ține obiectele și setați opacitatea dacă este detectat IE8.

$(".button-wrap.enter-now").click(isMobile ?
    function(){
        window.location = 'form/form.html';
    }
    : function(){
        var attrA = {startAt:{top:0}};
        var attrB = {top:"8%", delay:0.05, ease:Power3.easeOut};
        if (ie8 /* In case ie8 is not working for you: $.browser.msie  && parseInt($.browser.version, 10) === 8*/) {
            attrA.opacity = 1;
            attrB.opacity = 1;
        }
        TweenMax.to($iframeBg, 0.35, attrA);
        TweenMax.to($("#form-wrapper"), 0.45, attrB);
});
$("#close-form").click(function(){
    var attrA = {top:"110%", ease:Power3.easeOut};
    var attrB = {delay:0.1};
    if (ie8) {
        attrA.opacity = 0;
        attrB.opacity = 0;
    }
    TweenMax.to($("#form-wrapper"), 0.45, attrA);
    TweenMax.to($iframeBg, 0.25, attrB);
    TweenMax.to($iframeBg, 0.01, {top:"120%", delay:0.45});
});
0
adăugat
JavaScript, România - Moldova
JavaScript, România - Moldova
254 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com

JavaScript jobs România Moldova
JavaScript jobs România Moldova
109 participanți

Pentru confort opriți notificările. Vorbim despre posturi de muncă și freelance, proiecte proprii.