如何将这两个代码块简化为一个
How to simplify these two blocks of code into one?
$(".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});
});
我有上面的代码用于非ie8,下面的代码用于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});
});
}
我只是想知道,我怎么能简化成一个代码?我都不知道要找什么。非常感谢。
就像这样,如果检测到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});
});
在你的代码中寻找模式,然后重新排列。例如,您有一个带有单击侦听器的元素;这样做一次。手机版点击后也会收到同样的支票;这样做一次。等。因此,对于.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
点击处理程序做同样的事情。
为什么不直接将不透明度封装在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});
});
相关文章:
- AngularJS代码在一个代码笔中工作,但在移动时会中断
- 如何使用一个代码库在线和离线访问 HTML5/JS 应用程序中的数据库
- 如何在一个代码中检查无效的日期格式和超过18年的有效期
- 如何确保我的值已添加并存在,然后运行另一个代码jquery
- 我想制作一个代码;a“;变成“;b”"b”;变成“;c”;,等等
- 编写一个代码来拆分字符串“test”,并将Name的值分配给文本框,将ok的值分配到复选框
- 我想构建一个代码,在谷歌应用程序脚本中检查我在Gmail中导入的邮件,我该如何找到这个功能
- 如何为新表制作下一个代码滑块
- 我为我的 Gif 制作了一个代码,让一只鸟飞过屏幕,但即使它在同一文件夹中,图像也不可见
- 请求后是否可以在下一个代码行中获取 Ajax 响应
- Meteor.js部署用于网络和移动原生应用程序,一个代码库
- 获取iframe内容's的高度,而iframe正在托管一个代码为CAN'T被访问
- 损坏的格式工具无法修复它.导致上一个代码块中断
- 有没有一种发送电子邮件的方法使用“;mailto”;使用一个代码来检查用户是否有gmail或outlook(或其他)帐户
- 如何在firefox插件中只运行一个代码实例
- 就像Javascript的初学者一样,我试图创建一个代码来允许对象在y轴和x轴上上下移动
- 在网站上有一个代码,与alert一起工作,但在满足if条件时不链接到另一个网站
- 我有一个代码在index.js文件在android项目使用eclipse adt,
- 将一个代码放入另一个代码中
- 我已经在javascript中编写了一个代码来排序逗号分隔的值(数字),并且对于特定的值集,我的升序排序是不工作的