Comment simplifier ces deux blocs de code en un?

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

J'ai le code ci-dessus pour les non-ie8s, et ci-dessous pour ie8 - ils ont exactement la même apparence sauf qu'il n'y a pas d'opacité dans les 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});
    });
}

Je me demande juste, comment puis-je simplifier le code en un seul? Je ne sais même pas quoi chercher. Merci beaucoup.

0
Vous devriez rechercher l'opérateur ternaire.
ajouté l'auteur Danny Beckett, source
@ DannyBeckett: Il l'utilise déjà ou en abuse, je dirais ...
ajouté l'auteur elclanrs, source
En utilisant plutôt une instruction if..else .
ajouté l'auteur elclanrs, source
Eh bien, OMI, c'est plus facile à lire et à comprendre. Un opérateur ternaire convient pour une expression rapide, mais vous avez ici 7 lignes.
ajouté l'auteur elclanrs, source
@ DannyBeckett Vous voulez dire l'expression x? X: x? Je connais celui-ci. Mais comment puis-je extraire {opacité: 1} de l'objet?
ajouté l'auteur Luxiyalu, source
@elclanrs: comment ne pas en abuser? Merci!
ajouté l'auteur Luxiyalu, source
@ elclanrs désolé je viens de commencer à apprendre, pourquoi si/sinon mieux?
ajouté l'auteur Luxiyalu, source
@ elclanrs désolé je viens de commencer à apprendre, pourquoi si/sinon mieux?
ajouté l'auteur Luxiyalu, source
@ elclanrs droit. Merci.
ajouté l'auteur Luxiyalu, source
@ elclanrs droit. Merci.
ajouté l'auteur Luxiyalu, source

8 Réponses

Pourquoi ne pas simplement encapsuler l'opacité dans une instruction if-else .

$(".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
ajouté

Pourquoi ne pas simplement encapsuler l'opacité dans une instruction if-else .

$(".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
ajouté

Pourquoi ne pas simplement encapsuler l'opacité dans une instruction if-else .

$(".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
ajouté

Il suffit de rechercher des modèles dans votre code et de les réorganiser. Par exemple, vous avez un élément avec un écouteur de clic; fais ça une fois. Vous avez le même chèque pour mobile une fois que vous avez cliqué; fais ça une fois. etc. Ainsi, pour votre .button-wrap.enter-now , vous pourriez avoir une fonction avec quelque chose comme:

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

Vous pouvez également combiner ces TweenMax encore plus loin, mais je voulais que ce soit plus simple et j'espère que vous comprenez l'essentiel. Vous devriez maintenant pouvoir faire la même chose pour votre gestionnaire de clics # close-form .

0
ajouté

Il suffit de rechercher des modèles dans votre code et de les réorganiser. Par exemple, vous avez un élément avec un écouteur de clic; fais ça une fois. Vous avez le même chèque pour mobile une fois que vous avez cliqué; fais ça une fois. etc. Ainsi, pour votre .button-wrap.enter-now , vous pourriez avoir une fonction avec quelque chose comme:

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

Vous pouvez également combiner ces TweenMax encore plus loin, mais je voulais que ce soit plus simple et j'espère que vous comprenez l'essentiel. Vous devriez maintenant pouvoir faire la même chose pour votre gestionnaire de clics # close-form .

0
ajouté

Quelque chose comme cela, utilisez simplement des variables pour contenir les objets et définir l'opacité si IE8 est détecté.

$(".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
ajouté

Quelque chose comme cela, utilisez simplement des variables pour contenir les objets et définir l'opacité si IE8 est détecté.

$(".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
ajouté

Quelque chose comme cela, utilisez simplement des variables pour contenir les objets et définir l'opacité si IE8 est détecté.

$(".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
ajouté