极客观点
项目管理
HarmonyOS
我想保持点击每个div都有各自的弹出效果和弹入效果
在这基础上，改变下他的点击后的过程
现在的点击是连续点击的话他们都会弹出，延迟三秒后各自都弹入消失
这样体验很差
我想改成假如先点某一个div弹出框后，再接着点其它的时候去看下前一个有没有东西弹出
如果有的话就还是保留之前的弹出，但显示的内容就是现在这个点击的,这个框要怎么实现？？
这个小效果该怎么写
阅读 3.7k
使用 $.fn.siblings() 查找同级对象，并获取到这些对象下的图标和内容。
如：
var _this = this,
$this = $(this),
$siblings = $this.siblings(), // 获取同级对象
$sibContent = $siblings.find('.dd'), // 获取内容
$sibIcon = $siblings.find('.icon'); // 图标
// 方法一：点击前调整其他同级对象
$sibIcon.hide();
$sibContent.removeClass('add');
// 避免突兀
$sibIcon.hide(0, function(){
// 其他
$sibContent.removeClass('add');
});另外，还需要注意清空其定时器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0; padding:0; list-style:none;}
.main{ margin:20px auto; width:170px; height:160px;}
.b_box{ width:170px; height:100px; margin-bottom:10px;}
.b_box li{ display:none; background:#546213; width:170px; height:100px; transform:scale(0,0); font-size:20px;}
.b_box li.active{display:block; transform-origin:bottom left; color:#fff; transform:scale(1,1);
animation:fd .5s ease;
-webkit-animation:fd .5s ease;
}
@keyframes fd{
from{transform:scale(0,0);}
to{transform:scale(1,1);}
}
@-webkit-keyframes fd{
from{-webkit-transform:scale(0,0);}
to{-webkit-transform:scale(1,1);}
}
.s_box{ margin-right:-10px;}
.s_box li{ float:left; width:50px; height:50px; background:#333; border-radius:5px; cursor:pointer; margin-right:10px; color:#fff; position:relative; font-size:20px;}
.icon{ position:absolute; border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid #546213; left:50%; margin-left:-10px; top:-10px; display:none; transform:scale(0,0);}
.s_box li.active i.icon{ display:block; transform-origin:top left; transform:scale(1,1); animation:fd .5s ease;
-webkit-animation:fd .5s ease;}
</style>
</head>
<body>
<div class="main">
<ul class="b_box">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="s_box">
<li>1<i class="icon"></i></li>
<li>2<i class="icon"></i></li>
<li>3<i class="icon"></i></li>
</ul>
</div>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script>
$(function(){
var timer=null;
$(".s_box li").on("click",function(){
clearTimeout(timer);
var _index=$(this).index();
$(this).addClass("active").siblings('li').removeClass("active");
$(".b_box").find("li").eq(_index).addClass("active").siblings("li").removeClass("active");
timer=setTimeout(function(){
$('.s_box li.active').removeClass("active");
$(".b_box li.active").removeClass("active");
},3000);
})
})
</script>
</body>
</html>
本来想求助下sf里的大神的，不过都没有自己想要的结果还是自己解决了！！
因为以前也没有真正动手做过一个完整的效果，都是用些现成的
所以至于在弄这个效果的时候思绪有些乱，过后才整理出来了！！
大家如果觉得有地方可以改进的更好，就希望大家多多指点
这个效果我的大致处理方式是
1、根据popbox是否大于outter的offsetleft决定他是靠左还是靠右
2、靠左和靠右又分为是否为连续点击
3、计算左边过渡到右过和右边过渡到左边
4、至于每个位置上的值在刚开始就已经计算好了，每次都要记录下上次的值，才能确定当前的popbox和icon要移动多少
5、还有就是布局问题，之前也就是卡这布局上去了，过渡的时候要清除他本身自带的过渡(css3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.animationbox{width:470px;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最好和子级个数的宽一样--->
<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 class="outter"><div class='popbox anidd'><div class="icon"><span></span></div>功能7</div></div>
</div>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script>
$(function() {
var _boolrightToleft = false,//从右到左不连续
_boolrightToleftcontinuity = false,//从右到左连续
_boolleftToright = false,//从左到右不连续
_boolleftTorightcontinuity = false,//从左到右连续
flag = true,
timer = null,
time2 = null,
time3 = null,
time4 = null,
_tipleft = 0,//记录上一个_moveLeft的值
_tipright = 0;//记录上一个_moveright的值
$('.outter').each(function(){
var _this = $(this);
_this.attr('data-left',_this.offset().left);
});
$('.animationbox').on('click','.outter',function(){
var _this = $(this),
_thisleft = parseInt(_this.attr('data-left'));//outer距离屏幕的left值
_parent = _this.closest('.animationbox'),
_parentwidth = _parent.width(),//最外div的宽度
_popobj = _parent.find('.popbox'),//所有的popbox
_popbox = _this.find('.popbox'),//当前的popbox
_popwidth = _popobj.width(),//popbox的宽度
_outter = _parent.find('.outter'),//所有的outer
_icon = _this.find('.icon'),//当前的图标
_offsetleft = _parent.find('.outter').eq(0).offset().left,//第一个outer距离屏幕左边的值
_moveLeft = _thisleft - _offsetleft;//左边位置计算
_rightnum = Math.floor(_parentwidth / _this.outerWidth(true)) * _this.outerWidth(true) - 10;//获取outer个数总和
_moveright = _moveLeft + _popwidth - _rightnum;//右边位置计算
$('.outter').each(function(){//循环看下是否是连续点击，是连续点就把flag设为falg
if($(this).attr('data-fact')==='on'){
flag = false;
}
});
popclearstyle();
if(flag){//如果不是连续点击
if( _thisleft >= Math.floor(_popwidth + _offsetleft)){//(大于)右边不连续点击
_boolrightToleft = true;//是否从不是连续点击过渡到左边
_popbox.css('left',-_moveright).addClass('add');
_icon.css('left',_moveright);
_this.attr('data-fact','on');
_tipright = _moveright;
time3 = setTimeout(function(){
_popbox.css("left",0).removeClass('add');
_outter.attr('data-fact','off');
},3000);
}else{//(小于)左边不连续点击
_boolleftToright = true;//是否从不是连续点击过渡到右边
_popbox.css("left",-_moveLeft).addClass('add');
_icon.css('left',_moveLeft);
_this.attr('data-fact','on');
_tipleft = _moveLeft;
timer = setTimeout(function(){
_popbox.css("left",0).removeClass('add');
_outter.attr('data-fact','off');
},3000);
}
}else{
clearTimeout(timer);
clearTimeout(time3);
_popobj.removeClass('anidd').hide();
if( _thisleft >= Math.floor(_popwidth + _offsetleft)){//(大于)右边连续点击
_boolrightToleftcontinuity = true;
if(_boolleftToright || _boolleftTorightcontinuity){//判断左边是否是从点击或连续点击过来的
if(_boolleftToright) _boolleftToright = false;
if(_boolleftTorightcontinuity) _boolleftTorightcontinuity = false;
_popobj.removeClass('anidd').hide();
_popbox.css("left",-_moveLeft).addClass('add');
_icon.css('left',_tipleft);
_popbox.show();
setTimeout(function(){
_popbox.addClass('iconclass').css('left',-_moveright);
_icon.addClass('iconclass').css('left',_moveright);
_outter.attr('data-fact','off');
},10);
}else{
_popbox.css("left",-_moveright).addClass('add');//_moveright pop固定右值
_icon.css('left',_tipright);//_tipright 记录上次点击的位置
_popbox.show();
setTimeout(function(){
_popbox.addClass('iconclass').css('left',-_moveright);
_icon.addClass('iconclass').css('left',_moveright);
_outter.attr('data-fact','off');
},10);
}
_tipright = _moveright;
}else{//(小于)左边连续点击
_boolleftTorightcontinuity = true;
if(_boolrightToleft || _boolrightToleftcontinuity){//判断右边是否是从点击或连续点击过来的
if(_boolrightToleft) _boolrightToleft = false;
if(_boolrightToleftcontinuity) _boolrightToleftcontinuity = false;
_boolrightToleft = false;
_popbox.css("left",-_moveright).addClass('add');
_icon.css('left',_tipright);
_popbox.show();
setTimeout(function(){
_popbox.addClass('iconclass').css('left',-_moveLeft);
_icon.addClass('iconclass').css('left',_moveLeft);
_outter.attr('data-fact','off');
},10);
}else{
_popbox.css("left",-_moveLeft).addClass('add');
_icon.css('left',_tipleft);
_popbox.show();
setTimeout(function(){
_icon.addClass('iconclass').css('left',_moveLeft);
_outter.attr('data-fact','off');
},10);
}
_tipleft = _moveLeft;
}
timesetInterval();
}
function popclearstyle(){//清除过渡时添加的样式
if(_popbox.hasClass('iconclass')){
_popbox.removeClass('iconclass');
}
}
function timesetInterval(){
clearTimeout(time2);
time2 = setTimeout(function(){
_popbox.css('left',0).addClass('anidd').removeClass('add');
_popobj.addClass('anidd').removeClass('add').show();
_parent.find('.icon').removeClass('iconclass');
_outter.attr('data-fact','off');
flag = true;
},3000);
}
})
});
</script>
</body>
</html>撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
js 如何将Key属性相同的放在同一个数组？
{代码...} 说明：id和name是动态的，有可能后台返回的是age和school,不是固定id和name想要的结果是; {代码...}10 回答11.2k 阅读
为什么在谷歌浏览器中 'a' == ['a'] 返回 true？
'a' == ['a'] 谷歌浏览器返回了true 是为什么16 回答3k 阅读
vue项目如何在初始化之前跳转外部页面？
vue项目内有一个分享功能，但是这个分享出去的页面打开会非常慢，所以就想到了单独写了一套H5页面专门用于手机端打开，然后在这个vue项目的分享页面初始化函数里面加一个判断终端是否为移动端，如果是就再做一次跳转，到这个单独的H5页面上去，这样就不会去加载vue框架，打开速度会更快。以上是初始方案和预期。5 回答4.8k 阅读✓ 已解决
js如何控制移动端overflow:scroll容器滑动的最大速度？
{代码...} demo在这：[链接]在移动端滑动一下这个.box区域,稍微一用力就到头了，如果我想用js去控制他滑动的最大速度该怎么去处理？4 回答3.1k 阅读✓ 已解决
前端代码更新如何通知用户刷新页面？
前端代码更新如何通知用户刷新页面？2 回答2.7k 阅读✓ 已解决
为什么会出现CORS error？
先登录成功了。再次调用，就出现了CORS error在Login页调用这个接口就是正常的，换一个页面调用这个接口就出现了跨域问题。我把这段代码注释以后就正常了。3 回答2.3k 阅读✓ 已解决
请问一下，如何理解reduce函数呢？
但是reduce是减少的意思，请问如何形象化地理解reduce呢？ 我们可不可以理解：把参数2一个一个地带入到参数1（函数）中执行，这样也就慢慢减少呢？3 回答2.1k 阅读✓ 已解决
改成