Глючит анимация html js

208

22 апреля 2018, 19:37

Я делаю всплывающее окно, над кнопкой, при успешном добавлении в корзину. все вроде работает, но проблема если товар находится в слайдере, slick.

Почему то там координаты как то по другому считаются и я не могу нормально нацелить окно на кнопку.

Я использую абсолютное позиционирование окна. Можете есть какое то готовое решение, подскажите буду благодарен?

Набросал код:

$('.carusel').slick({ 
  infinite: true, 
  slidesToShow: 3, 
  slidesToScroll: 1, 
  dots: true, 
}); 
 
var tooltip_cart; 
var cart_button_height; 
 
function tooltip_cart_animate(txt) { 
  //if (!txt) txt = "Добавлено в корзину"; 
  tooltip_cart.animate({ 
    opacity: 1, 
    top: "-=" + cart_button_height 
    // height: "toggle" 
  }, 500, function() { 
    tooltip_cart.mouseleave(function () { 
      $(this).css({opacity: 0.2}); 
    }); 
  }); 
} 
 
// получение координат смещения элемента относительно левого верхнего угла окна 
function getOffsetSum(elem) { 
  var top=0, left=0 
  while(elem) { 
    top = top + parseFloat(elem.offsetTop) 
    left = left + parseFloat(elem.offsetLeft) 
    elem = elem.offsetParent 
  } 
 
  return {top: Math.round(top), left: Math.round(left)} 
} 
 
// установка окна на кнопку 
function tooltip_cart_offset(t) { 
  var offset = getOffsetSum(t); 
  cart_button_height = t.offsetHeight; 
  console.log(offset, 'W', t.offsetWidth,  tooltip_cart.outerWidth(), 'H', t.offsetHeight, tooltip_cart.outerHeight()); 
  offset.left = offset.left - (tooltip_cart.outerWidth() - t.offsetWidth)/2; 
  offset.top = offset.top - (tooltip_cart.outerHeight() - t.offsetHeight) - 8; 
  tooltip_cart.offset(offset); 
  
   
} 
 
// функция выбора подарка и отправка его в корзину 
function ajax_submit_gift(t, id) { 
  tooltip_cart_offset(t); 
  tooltip_cart_animate(); 
} 
 
$(document).ready(function () {  
  // alert(1); 
  tooltip_cart = $('.tooltip_cart'); 
     
  $('.my button').click(function () { 
    // $('body').append('1111'); 
     ajax_submit_gift(this, 1); 
    return false; 
  }); 
 
});

body { 
  margin: 0; 
  padding: 0; 
  background: #eee;  
  height: 100%; 
 } 
 
.wrap { 
  width: 600px; 
  height: 100%; 
  background: #fff; 
  margin : 0 auto; 
  padding: 1em; 
  }  
 
 div.my { 
  background: #ddd;  
  padding: 5px; 
  margin-right: 10px; 
  text-align: center; 
  width: 210px; 
  margin-bottom: 1em 
} 
 
.tooltip_cart{ 
  position:absolute; 
  box-sizing:border-box; 
  display:block; 
  background:#fe547b; 
  color:#ffffff; 
  padding:12px; 
  left:0; 
  top:0; 
  /* width: 200px; */ 
  font-size:1.1em; 
  //height:50px; 
  //line-height:25px; 
  border-radius:5px; 
  text-align:center; 
  opacity:0.2; 
  //transition:.25s ease-in-out; 
  
  
 
} 
.tooltip_cart:after{ 
    content:''; 
    display:block; 
    position:absolute; 
    //top:50px; 
    bottom:-8px; 
    left:50%; 
    margin-left:-8px; 
    height:0; 
    width:0; 
    border-left:8px solid transparent; 
    border-right:8px solid transparent; 
    border-top:8px solid #fe547b; 
    //transition:.25s ease-in-out; 
  }

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> 
 
<link rel="stylesheet" type="text/css" href="//kenwheeler.github.io/slick/slick/slick-theme.css"/> 
  
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
 
<div class="wrap"> 
  <h1>Заголовок</h1> 
   
   <div class="my"> 
      <p>товар5</p> 
      <button>Кнопка</button> 
    </div> 
   
     <div class="my"> 
      <p>товар5</p> 
      <button>Кнопка</button> 
    </div> 
   
  <div class="carusel"> 
    <div class="my"> 
      <p>товар1</p> 
      <button>Кнопка</button> 
    </div> 
     
    <div class="my"> 
      <p>товар2</p> 
      <button>Кнопка</button> 
    </div> 
     
    <div class="my"> 
      <p>товар3</p> 
      <button>Кнопка</button> 
    </div> 
     
    <div class="my"> 
      <p>товар4</p> 
      <button>Кнопка</button> 
    </div> 
     
    <div class="my"> 
      <p>товар5</p> 
      <button>Кнопка</button> 
    </div> 
  </div> 
</div> 
 
  <div class="tooltip_cart"> 
    <a href="#"><b>Добавлено</b><br> 
     Перейти в корзину →</a> 
  </div>

При клике на кнопку, происходит всплывание окна над кнопкой, но если нажимаем в карусели, то окошко где то справа далеко всплывает.

И, кстати, если после карусели нажимаем на обычный товар, не в карусели, то окошко сначала почему то криво всплывает, а повторное нажатие - как надо.

Answer 1

Я просто эмитировал click - так вроде смотрится лучше ?

смотреть на всю страницу

.item { 
  border: 1px solid red; 
  display: inline-block; 
  padding: 0 30px; 
  position: relative; 
  margin: 100px; 
} 
 
.focus-elem { 
  position: absolute; 
  border: 1px solid red; 
  padding: 10px; 
  background: rgba(255, 0, 0, .5); 
  visibility: hidden; 
  transition: all .4s linear; 
} 
 
button:focus~.focus-elem { 
  animation: show .5s linear; 
} 
 
@keyframes show { 
  0% { 
    visibility: visible; 
  } 
  50% { 
    opacity: .3; 
  } 
  100% { 
    visibility: hidden; 
    transform: scale(2); 
    opacity: 0; 
  } 
}

<div class="item"> 
  <p>lorem4</p> 
  <button>item</button> 
  <div class="focus-elem"> 
    Добавлено 
  </div> 
</div> 
<div class="item"> 
  <p>lorem4</p> 
  <button>item</button> 
  <div class="focus-elem"> 
    Добавлено 
  </div> 
</div> 
<div class="item"> 
  <p>lorem4</p> 
  <button>item</button> 
  <div class="focus-elem"> 
    Добавлено 
  </div> 
</div> 
<div class="item"> 
  <p>lorem4</p> 
  <button>item</button> 
  <div class="focus-elem"> 
    добавлено 
  </div> 
</div>