window.all is undefined的原因是什么，是因为transition的js吗？
/第一次简化
(function($){
var transition = window.all.transition;
function init($ele, hiddenCallback) { //元素初始化
if ($ele.is(':hidden')) {
$ele.data('status', 'hidden');
}
if (typeof hiddenCallback === 'function') {
hiddenCallback();
// $ele.addClass('fadeOut');
} else {
$ele.data('status', 'shown');
}
}
function show($ele, callback) { //show公共部分
if ($ele.data('status') === 'show') return;
if ($ele.data('status') === 'shown') return;
$ele.data('status', 'show').trigger('show');
callback();
}
function hide($ele, callback) { //hide公共部分
if ($ele.data('status') === 'hide') return;
if ($ele.data('status') === 'hidden') return;
$ele.data('status', 'hide');
callback();
}
//1、显示与隐藏（无动画版）
var silent = {
init: init,
show: function (ele) {
var $ele = $(ele);
show($ele, function () {
$ele.show();
$ele.data('status', 'shown');
$ele.trigger('shown');
})
},
hide: function (ele) {
var $ele = $(ele);
hide($ele, function () { //这里的function为回调函数，写与公共部分不一样的
$ele.hide();
$ele.data('status', 'hidden').trigger('hidden');
})
}
};
// //封装css中的动画
var css = { //将css中的样式方法相同的进行封装
_init: function (ele, className) { //css方法下公用的初始状态
var $ele = $(ele);
$ele.addClass('transition');
init($ele, function () { //这里的function为回调函数
$ele.addClass(className);
});
},
_show: function (ele, className) {
var $ele = $(ele);
show($ele, function () { //这里的function为回调函数
$ele.off('transitionend').one('transitionend', function () {
$ele.data('status', 'shown');
$ele.trigger('shown');
});
$ele.show();
setTimeout(function () {
$ele.removeClass(className);
}, 200);
})
},
_hide: function (ele, className) {
var $ele = $(ele);
hide($ele, function () { //这里的function为回调函数
$ele.off('transitionend').one('transitionend', function () {
$ele.hide();
$ele.data('status', 'hidden');
$ele.trigger('hidden');
})
$ele.addClass(className);
})
},
//a、fade版
fade: {
init: function ($ele) {
css._init($ele, 'fadeOut');
},
show: function (ele) {
var $ele = $(ele);
css._show($ele, 'fadeOut'); //这里的function为回调函数
},
hide: function (ele) {
var $ele = $(ele);
css._hide($ele, 'fadeOut');
}
},
//b、上下卷帘版
// 上下卷帘通过改变垂直高度来实现动画
slideUpDown: {
init: function ($ele) {
$ele.height($ele.height()); //元素本身没有高度，是内容撑开的，在初始化时就要计算元素的高度即使时隐藏的
css._init($ele, 'sliderUpDownCollapse');
},
show: function (ele) {
var $ele = $(ele);
css._show($ele, 'sliderUpDownCollapse');
},
hide: function (ele) {
var $ele = $(ele);
css._hide($ele, 'sliderUpDownCollapse');
}
},
slideLeftRight: {
init: function ($ele) {
$ele.width($ele.width()); //元素本身没有高度，是内容撑开的，在初始化时就要计算元素的高度即使时隐藏的
css._init($ele, 'slideLeftRightCollapse');
},
show: function (ele) {
var $ele = $(ele);
css._show($ele, 'slideLeftRightCollapse');
},
hide: function (ele) {
var $ele = $(ele);
css._hide($ele, 'slideLeftRightCollapse');
}
},
fadeslideUpDown: {
init: function ($ele) {
$ele.height($ele.height()); //元素本身没有高度，是内容撑开的，在初始化时就要计算元素的高度即使时隐藏的
css._init($ele, 'fadeOut slideUpDownCollapse');
},
show: function (ele) {
var $ele = $(ele);
css._show($ele, 'fadeOut slideUpDownCollapse');
},
hide: function (ele) {
var $ele = $(ele);
css._hide($ele, 'fadeOut slideUpDownCollapse');
}
},
fadeslideLeftRight: {
init: function ($ele) {
$ele.width($ele.width()); //元素本身没有高度，是内容撑开的，在初始化时就要计算元素的高度即使时隐藏的
css._init($ele, 'fadeOut slideLeftRightCollapse');
},
show: function (ele) {
var $ele = $(ele);
css._show($ele, 'fadeOut slideLeftRightCollapse');
},
hide: function (ele) {
var $ele = $(ele);
css._hide($ele, 'fadeOut slideLeftRightCollapse');
}
}
};
//3、js方式
// a、淡入淡出fade
var js = { //init\show\hide的判断之前已经封装好了，不同的回调函数调用就行
_init: function ($ele, hiddenCallback) { //公共初始状态
$ele.removeClass('transition'); //如果在HTML标签中设置css动画样式，js就不能政策执行了
init($ele, hiddenCallback);
},
_show: function ($ele, mode) { //公共show
show($ele, function () { //回调函数
$ele.stop()[mode](function () { //这里的stop相当于css方法中的off
$ele.data('status', 'shown').trigger('shown');
});
})
},
_hide: function ($ele, mode) { //公共hide
hide($ele, function () { //回调函数
$ele.stop()[mode](function () {
$ele.data('status', 'hidden').trigger('hidden');
})
})
},
fade: {
init: function ($ele) {
js._init($ele);
},
show: function ($ele) {
js._show($ele, 'fadeIn');
},
hide: function ($ele) {
js._hide($ele, 'fadeOut') //回调函数
}
},
// b、 上下卷帘slideUpDown
slideUpDown: {
init: function ($ele) {
js._init($ele);
},
show: function ($ele) {
js._show($ele, 'slideDown');
},
hide: function ($ele) {
js._hide($ele, 'slideUp');
}
},
slideLeftRight: {//封装后的
init: function ($ele) {
//用一个对象保存css中的属性
js._customInit($ele, {
'width': 0,
'padding-left': 0,
'padding-right': 0
})
},
show: function ($ele) {
js._customShow($ele);
},
hide: function ($ele) {
js._customHide($ele, {
'width': 0,
'padding-left': 0,
'padding-bottom': 0
});
}
},
fadeSlideUpDown: { //封装后的代码
init: function ($ele) {
js._customInit($ele, {
'opacity': 0,
'height': 0,
'padding-left': 0,
'padding-right': 0
})
//用一个对象保存css中的属性
},
show: function ($ele) {
js._customShow($ele);
},
hide: function ($ele) {
js._customHide($ele, {
'height': 0,
'opacity': 0,
'padding-top': 0,
'padding-down': 0
});
},
},
// // e、fades+lideLeftRight
fadeSlideLeftRight: { //封装的
init: function ($ele) {
js._customInit($ele, {
'opacity': 0,
'width': 0,
'padding-left': 0,
'padding-right': 0
})
},
show: function ($ele) {
js._customShow($ele);
},
hide: function ($ele) {
js._customHide($ele, {
'width': 0,
'opacity': 0,
'padding-top': 0,
'padding-down': 0
});
},
},
//jQuery中没有的样式的公共的函数封装
_customInit : function ($ele, options) {
var styles = {};
for (var p in options) {
styles[p] = $ele.css(p);
$ele.data('styles', styles); //data自定义style,将上面定义的styles传给定义的styles
};
js._init($ele, function () {
$ele.css(options);
})
},
_customShow : function ($ele, styles) {
show($ele, function () { //回调最外层公共的show
var styles = $ele.data('styles');
$ele.show();
$ele.stop().animate(styles, function () { //动画完毕后的状态
$ele.data('status', 'shown').trigger('shown');
});
})
},
_customHide : function ($ele, options) {
hide($ele, function () {
$ele.stop().animate(options, function () {
$ele.data('status', 'hideen').trigger('hidden');
});
});
}
};
var defaults={
css:false,
js:false,
animation:'fade'
}
function showHide($ele,option){
var mode = null;//定义一个变量mode，接收是哪一种方式
//外部传入得到的options覆盖defaults，放入一个空对象
var options = $.extend({},defaults,options);
if(options.css && transition.isSupport){//如果传入的css3或者支持transition
//当外部的参数（样式名称option）传递错误，用||要进行容错处理(如果传错了就用defaults下的)
mode = css[options.animation]||css3[defaults.animation]
}else if(options.js){//js动画
mode = js[options.animation]||js[defaults.animation]
}else{//无动画
mode = silent;
}
mode.init($ele);
return{//统一返回
show:mode.show,
hide:mode.hide
//用proxy可以让外部调用的时候不用在showHide.show($box)里传入box；
//show:$proxy(mode,show,this,$ele),
//hide:$proxy(mode,hide,this,$ele)
};
}
//调用将局部变全局
window.all = window.all||{};
window.all.showHide = showHide;
//用插件的方式来调用
// $.fn.extend({
// showHide:function(option){
// return this.each(function(){
// var $this=$(this),
// options = $extend({},defaults,typeof option === object && option),
// mode = $this.data('showHide');
// if(!mode){
// $this.data('showHide',mode = showHide($this,option));
// }
// if(typeof mode[option] === 'function'){
// mode[option]();
// }
// })
// }
// })
})(jQuery);
//外部调用（组件化调用）
var $box = $('#box');
window.all.showHide($box,{
css:true,
animation:'fade'
});
$('#btn-show').on('click', function () {
showHide.show($box);
});
$('#btn-hide').on('click', function () {
showHide.hide($box);
});
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星