点击这里
我想保持点击每个div都有各自的弹出效果和弹入效果
在这基础上，改变下他的点击后的过程
现在的点击是连续点击的话他们都会弹出，延迟三秒后各自都弹入消失
这样体验很差
我想改成假如先点某一个div弹出框后，再接着点其它的时候去看下前一个有没有东西弹出
如果有的话就还是保留之前的弹出，但显示的内容就是现在这个点击的,这个框要怎么实现？？
弄出来了，效果还要改进
jbox插件，看看适不适合你，不用什么东西都自己写。
本来想求助下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>$(this).each(function(){改成
$('.outter').each(function(){<!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>
弹出来的div位置都不对啊，小三角方向也不对。
使用 $.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');
});另外，还需要注意清空其定时器。