Question

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

我有非ie8s的上面代码，而ie8下面的代码 - 它们看起来完全相同，只是补间中没有不透明度：

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

我只是想知道，如何将代码简化为一个？我甚至都不知道要搜索什么。非常感谢。

Answer 1

只需在代码中查找模式，然后重新排列。例如，你有一个带有点击监听器的元素;这样做一次。点击后，您可以对手机进行相同的检查;这样做一次。等等。对于你的.button-wrap.enter-now，你可以使用这样的函数：

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

您还可以将这些TweenMax组合得更进一步，但我希望保持简单，我希望您能得到这个要点。现在，您也可以为#close-form点击处理程序执行相同的操作。

Answer 2

像这样，只需使用变量来保存对象，并在检测到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});
});

Answer 3

为什么不在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});
});

如何将这两个代码块简化为一个？

3 个答案: