.active
, то реализовывается перепозиционирование (просто меняется занчение left), при этом мы устанавливаем на .leftbar анимацию для position и имеем результат..stop().animate()
, это предотврватит дерганую анимацию, стек событий будет очищаться и они не будут выполняться дург за другом <div class="wrapper">
<div class="circle_section">
<div class="circle"><div class="popup"></div></div>
<div class="circle"><div class="popup"></div></div>
<div class="circle"><div class="popup"></div></div>
<div class="circle"><div class="popup"></div></div>
<div class="circle"><div class="popup"></div></div>
</div>
</div>
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 1000px;
margin: 0 auto;
position: relative;
}
.popup {
width: 250px;
height: 150px;
background-color: blue;
display: inline-block;
margin: 0px -50px;
border: 2px solid red;
position: absolute;
display: none;
left: 0;
top: -170px
}
.circle {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
border-radius: 50%;
margin: 20px;
position: relative;
}
$(function(){
$('.circle').hover(function(){
$(this).children('.popup').stop().show()
},function(){
$(this).children('.popup').stop().hide()
})
});
$route = empty($this->request->get['route']) ? 'common/home' : $this->request->get['route'];
$css_file = str_replace('/', '_', $route) . '.css';
if(file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/css/' . $css_file)) {
$data['personal_styles'] = 'catalog/view/theme/' . $this->config->get('config_template'). '/css/' . $css_file;
}else{
$data['personal_styles'] = null;
}
<?php if ($data['personal_styles']) { ?>
<link href="<?php echo $data['personal_styles'] ?>" rel="stylesheet" media="all" type="text/css" />
<?php } ?>