animation:'fadeSlideUpDown'没有效果
<!DOCTYPE html>
<html>
<head>
<title>mutao</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<style type="text/css">
.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index: 2;
}
.dropdown-arrow{
display: inline-block;
background-repeat: no-repeat;
vertical-align: middle;
}
.dropdown-layer{
z-index: 1;
display: none;
position: absolute;
overflow: hidden;
}
.dropdown-left{
left: 0;
right: auto;
}
.dropdown-right{
right: 0;
left: auto;
}
/*.menu .dropdown*/
/*剔除公共样式*/
.menu .dropdown-toggle{
display: block;
height: 100%;
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.dropdown-arrow{
width: 8px;
height: 6px;
/*background-image: url(./img/dropdown-arrow.png);*/
margin-left: 8px;
}
.dropdown-layer{
top: 100%;
background-color: #fff;
border: 1px solid #cdd0d4;
}
.menu-item{
display: block;
height: 30px;
line-height: 30px;
padding: 0 12px;
color: #4d555d;
/*不换行*/
white-space: nowrap;
}
.menu-item:hover{
background-color: #f3f5f7;
}
/*第二种方法：js移入移出，使用addClass*/
.menu-active .dropdown-toggle{
background-color:#fff;
border-color:#cdd0d4;
}
.menu-active .dropdown-arrow{
/*background-image:url(./img/dropdown-arrow-active.png);*/
}
/*第三种方法：直接用css hover*/
/*移入.dropdown:hover*/
/*对.dropdown-toggle设置效果*/
/*.menu.dropdown:hover .dropdown-toggle{
background-color:#fff;
border-color:#cdd0d4;
}
.menu.dropdown:hover .dropdown-arrow{
background-image:url(../img/dropdown-arrow-active.png);
}
.menu.dropdown:hover .dropdown-layer{
display: block;
}
*/
@font-face {
font-family: "iconfont";
src: url('font/iconfont.eot?t=1477124206');
/* IE9*/
src: url('font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */
url('font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('font/iconfont.svg?t=1477124206#iconfont') format('svg');
/* iOS 4.1- */
}
.icon {
font-family: "iconfont" !important;
font-size: 14px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
/*包含-active的*/
[class*="-active"].dropdown-arrow{
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.fadeout
{
visibility: hidden !important;
opacity: 0 !important;
}
.slideUpDownCollapse{
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.slideLeftRightCollapse{
width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
</style>
</head>
<body>
<div class="menu dropdown">
<div class="menu dropdown" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow icon"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/transition2.js"></script>
<script type="text/javascript" src="js/showhide2.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
<script type="text/javascript">
//插件的调用
$('.dropdown').dropdown();
</script>
</body>
</html>
// 创建一个局部作用域，避免暴露在全局作用域下
//封装一个模块
// 自我执行的匿名函数
(function($){
// 严格模式，写代码要求会更加严格规范
// 它的作用有：
// （1） 消除Javascript语法的一些不合理、不严谨之处，
// （2）消除代码运行的一些不安全之处，保证代码运行的安全；
// 比如：在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，全局变量必须显式声明。
'use strict';
//dropdown
// $('.dropdown').hover(function(){
// // 把$(this)缓存下来，防止后面获取多次
// var $this=$(this);
// $this.addClass($this.data('active')+'-active');
// },function(){
// var $this=$(this);
// $this.removeClass($this.data('active')+'-active');
// })
// 由上面的方法改造而成的公共方法，只需要在html设置不同的data-active
function dropdown(elem){
// 把参数转为jQuery对象
var $elem=$(elem),
$layer=$elem.find('.dropdown-layer'),
activeClass=$elem.data('active')+'-active';//提前拼接好
$layer.showHide({
css3:true,
js:true,
animation:'fadeSlideUpDown'
})
$elem.hover(function(){
$elem.addClass(activeClass);
$layer.showHide('show')
},function(){
$elem.removeClass(activeClass);
$layer.showHide('hide')
})
}
// 一般方法：调用dropdown函数
// 调用方法的参数为单数，这里获取到的是一个数组，所以需要设置索引，取出他的第一个
// dropdown($('.dropdown')[1])
// console.log($('.dropdown')[0])
// 方法一：当对多个html元素设置dropdown，可以用each遍历所有的dropdown
// $('.dropdown').each(function(){
// dropdown($(this))
// })
// 方法二：当对多个html元素设置dropdown，可以用jQuery的插件
// $.fn）是jQuery的原型对象，也就是prototype，extend()方法是jQuery中封装的方法，用于为jQuery的原型添加新的属性和方法，这些方法可以在jQuery实例对象上调用。
// 这段代码也就是在jQuery原型上添加定义的dropdown方法，然后哪个元素使用这个方法，调用这个方法即可：
$.fn.extend({
dropdown:function(){
//返回时遍历所有元素
return this.each(function(){
dropdown(this)
})
}
})
// //插件的调用
// $('.dropdown').dropdown();
})(jQuery)
(function($){
'use strict';
var transition=window.mt.transition;
// hiddenCallback：确定你是隐藏时的回调
function init(elem,hiddenCallback){
if(elem.is(':hidden')){
//hidden
elem.data('status','hidden')
if(typeof hiddenCallback==='function') hiddenCallback();
}else{
//shown
elem.data('status','shown')
}
}
function show(elem,callback){
if(elem.data('status')==='show') return;
if(elem.data('status')==='shown') return;
//动画开始触发show
elem.data('status','show').trigger('show')
callback();
}
function hide(elem,callback){
if(elem.data('status')==='hide') return;
if(elem.data('status')==='hidden') return;
elem.data('status','hide').trigger('hide')
callback();
}
var silent={
init:init,
show:function(elem){
show(elem,function(){
elem.show();
elem.data('status','shown').trigger('shown')
})
},
hide:function(elem){
hide(elem,function(){
elem.hide();
elem.data('status','hidden').trigger('hidden')
})
}
};
var css3={
fade:{
init:function(elem){
css3._init(elem,'fadeout')
},
show:function(elem){
css3._show(elem,'fadeout')
},
hide:function(elem){
css3._hide(elem,'fadeout')
}
},
slideUpDown:{
init:function(elem){
// 给元素设置与其相同的高度（当元素由子元素撑开时可用）
elem.height(elem.height())
css3._init(elem,'slideUpDownCollapse')
},
show:function(elem){
css3._show(elem,'slideUpDownCollapse')
},
hide:function(elem){
css3._hide(elem,'slideUpDownCollapse')
}
},
slideLeftRight:{
init:function(elem){
elem.width(elem.width)
css3._init(elem,'slideLeftRightCollapse')
},
show:function(elem){
css3._show(elem,'slideLeftRightCollapse')
},
hide:function(elem){
css3._hide(elem,"slideLeftRightCollapse")
}
},
fadeSlideUpDown:{
init:function(elem){
css3._init(elem,'slideUpDownCollapse fadeout')
},
show:function(elem){
css3._show(elem,'slideUpDownCollapse fadeout')
},
hide:function(elem){
css3._hide(elem,'slideUpDownCollapse fadeout')
}
},
fadeSlideLeftRight:{
init:function(elem){
css3._init(elem,'slideLeftRightCollapse fadeout')
},
show:function(elem){
css3._show(elem,'slideLeftRightCollapse fadeout')
},
hide:function(elem){
css3._hide(elem,'slideLeftRightCollapse fadeout')
}
}
};
css3._init=function(elem,className){
elem.addClass('transition');
init(elem,function(){
elem.addClass(className)
})
};
css3._show=function(elem,className){
show(elem,function(){
//动画结束触发shown
//off()移除之前的事件（当连续点击不同按钮，每个按钮的方法都会运行一遍，移除之后，再连续切换按钮，就会停止，不再执行后面的事件）
elem.off(transition.end).one(transition.end,function(){
elem.data('status','shown').trigger('shown')
});
elem.show();
setTimeout(function(){
elem.removeClass(className)
},20);
})
};
css3._hide=function(elem,className){
hide(elem,function(){
// 给动画绑定一个事件，当动画播放完就隐藏起来
elem.off(transition.end).one(transition.end,function(){
elem.hide();
elem.data('status','hidden').trigger('hidden')
})
elem.addClass(className)
})
}
var js={
fade:{
init:function(elem){
js._init(elem)
},
show:function(elem){
js._show(elem,'fadeIn')
},
hide:function(elem){
js._hide(elem,'fadeOut')
}
},
slideUpDown:{
init:function(elem){
js._init(elem)
},
show:function(elem){
js._show(elem,'slideDown')
console.log('slideUpDown-show')
},
hide:function(elem){
js._hide(elem,'slideUp')
console.log('slideUpDown-hide')
}
},
slideLeftRight:{
init:function(elem){
js._customInit(elem,{
'width':0,
'padding-left':0,
'padding-right':0
})
},
show:function(elem){
js._customShow(elem)
},
hide:function(elem){
js._customHide(elem,{
'width':0,
'padding-left':0,
'padding-right':0
})
}
},
fadeSlideUpDown:{
init:function(elem){
js._customInit(elem,{
'opacity':0,
'height':0,
'padding-top':0,
'padding-bottom':0
})
},
show:function(elem){
js._customShow(elem)
},
hide:function(elem){
js._customHide(elem,{
'opacity':0,
'height':0,
'padding-top':0,
'padding-bottom':0
})
}
},
fadeSlideLeftRight:{
init:function(elem){
js._customInit(elem,{
'opacity':0,
'width':0,
'padding-left':0,
'padding-right':0
})
},
show:function(elem){
js._customShow(elem)
},
hide:function(elem){
js._customHide(elem,{
'opacity':0,
'width':0,
'padding-left':0,
'padding-right':0
})
}
}};
js._init=function(elem,hiddenCallback){
// js操作动画的时候，不能用transition
elem.removeClass('transition')
init(elem,hiddenCallback)
}
js._customInit=function(elem,options){
var styles={};
for(var p in options){
styles[p]=elem.css(p)
}
elem.data('styles',styles)
js._init(elem,function(){
elem.css(options)
})
}
js._show=function(elem,mode){
show(elem,function(){
// 当动画结束，设置状态并触发shown
//stop()移除之前的事件（当连续点击不同按钮，每个按钮的方法都会运行一遍，移除之后，再连续切换按钮，就会停止，不再执行后面的事件）
elem.stop()[mode](function(){
elem.data('status','shown').trigger('shown');
});
})
}
js._customShow=function(elem){
show(elem,function(){
elem.show();
elem.stop().animate(elem.data('styles'),function(){
elem.data('status','shown').trigger('shown')
})
})
}
js._hide=function(elem,mode){
hide(elem,function(){
elem.stop()[mode](function(){
elem.data('status','hidden').trigger('hidden');
});
})
}
js._customHide=function(elem,options){
hide(elem,function(){
elem.stop().animate(options,function(){
// 动画执行完毕就隐藏起来
elem.hide();
elem.data('status','hidden').trigger('hidden')
})
})
}
//默认值
var defaults={
css3:false,
js:false,
animation:'fade'
};
// options：给元素设置的动画样式，当调用showHide时，传入一个对象，里面就是具体的动画效果
function showHide(elem,options){
var mode=null;
//
if(options.css3&&transition.isSupport){
// 当传参错误时，执行defaults.animation
mode=css3[options.animation]||css3[defaults.animation]
}else if(options.js){
mode=js[options.animation]||js[defaults.animation]
}else{
mode=silent
}
mode.init(elem);
return{
// $.proxy方法主要是用来传参数的。
show:$.proxy(mode.show,this,elem),
hide:$.proxy(mode.hide,this,elem)
}
}
//插件的方式
//在jq原型上扩展一个方法，对外可以直接调用showHide
//方法中有一个参数
$.fn.extend({
showHide:function(option){
////将调用方法的元素进行循环遍历，有可能是多个元素
return this.each(function(){
// $this：elem
// 将循环的每一个元素赋值给$this变量
var $this=$(this),
// 检测传入的参数option是否是一个对象，如果是的话，和默认的参数default合并成一个对象，再赋值给options参数
options=$.extend({},defaults,typeof options==='object'&& option),
// 通过data方法获取showHide属性值
mode=$this.data('showHide');
if(!mode){
//使用data方法添加上showHide属性，属性值是调用showHide方法返回出来的一个对象，里面有两个方法
$this.data('showHide',mode=showHide($this,options))
}
//传入的参数是showHide()的方法名，那就执行这个方法
if(typeof mode[option]==='function'){
mode[option]();
}
})
}
})
window.mt=window.mt||{};
window.mt.showHide=showHide;
})(jQuery);
(function(){
//判断浏览器是否支持transition过渡
var transitionEndEventName={
transition:'transitionend',
MozTransition:'transitionend',
WebkitTransition:'webkitTransitionEnd',
OTransition:'oTransition otransition'
};
var transitionEnd='',
isSupport=false;
for(var name in transitionEndEventName){
if(document.body.style[name]!==undefined){
transitionEnd=transitionEndEventName[name]
isSupport=true;
}
break;
}
// 在全局作用域下暴露一个变量
window.mt=window.mt||{};
window.mt.transition={
end:transitionEnd,
isSupport:isSupport
}
})()
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星