极客观点
项目管理
HarmonyOS
我这里点击第一个框再点击第二个的时候他的那个向下箭头不会过渡，点击再点击其它的时候又不会了
我这是拿里有问题？？
已解决了！！
写错了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.animationbox{width:400px;height:400px;margin:200px auto;padding:100px;}
.outter{width:50px;height:50px;background:#333;position:relative;float:left;border-radius:5px;margin:100px 10px 0 0;cursor:pointer;}
.popbox{position:absolute;top:-310px;width:300px;height:300px;background:#546213;text-align:center;line-height:100px;}
.icon{position:absolute;width:50px;height:10px;left:0px;bottom:0px;}
.icon span{position: absolute;width:10px;height:10px;background:#546213;transform:rotate(45deg);left:18px;bottom:-4px;}
.anidd{left:0px;transform-origin:bottom left;transition:all 0.4s ease;transform:scale(0,0);}
.add{transform:scale(1,1);}
.iconclass{transition:all 0.5s ease;}
</style>
</head>
<body>
<div class="animationbox">
<div class="outter"><div class='popbox anidd'><div class="icon"><span></span></div>功能1</div></div>
<div class="outter"><div class='popbox anidd'><div class="icon"><span></span></div>功能2</div></div>
<div class="outter"><div class='popbox anidd'><div class="icon"><span></span></div>功能3</div></div>
<div class="outter"><div class='popbox anidd'><div class="icon"><span></span></div>功能4</div></div>
<div class="outter"><div class='popbox anidd'><div class="icon"><span></span></div>功能5</div></div>
<div class="outter"><div class='popbox anidd'><div class="icon"><span></span></div>功能6</div></div>
</div>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script>
$(function() {
var flag = true,timer = null,_timer = null,_initleft = 0;
$('.outter').each(function(){
var icon = $(this).find('.icon');
icon.attr('data-left',icon.offset().left);
});
$('.animationbox').on('click','.outter',function(){
var _this = $(this),
_popobj = $('.popbox'),
_popbox = _this.find('.popbox'),
_outter = $('.outter'),
_icon = _this.find('.icon');
$('.outter').each(function(){
if($(this).attr('data-fact')==='true'){flag = false;}
});
function timesetInterval(){
clearTimeout(_timer);
_timer = setTimeout(function(){
_popbox.addClass('anidd');
_popbox.removeClass('add');
_outter.find('.popbox').removeClass('add').addClass('anidd').show();
flag = true;
},3000);
}
if(flag){
_popbox.addClass('add');
_this.attr('data-fact',true);
_initleft = _icon.offset().left - $('.outter').eq(0).offset().left;
timer = setTimeout(function(){
_popbox.removeClass('add');
_this.attr('data-fact','');
},3000);
}else{
clearTimeout(timer);
var offsetleft = $('.outter').eq(0).offset().left;
_outter.attr('data-fact','');
_outter.find(_popobj).removeClass('anidd').hide();
$('.outter').each(function(i){
var _objleft = $(this).offset().left - offsetleft;
var _popshow = $(this).find('.popbox');
var _icon = $(this).find('.icon');
_icon.css('left', _initleft +'px');
_popshow.css('left',(-_objleft));
});
_popbox.show();
var objleft = parseFloat(_icon.attr('data-left')) - offsetleft;
setTimeout(function(){
_icon.addClass('iconclass').css('left' , objleft + 'px');
},10);
_initleft = objleft;
//timesetInterval()
}
})
});
</script>
</body>
</html>
贴代码 贴代码