0

Помогите, разобраться как сделать что б на примере

window.onload = function() {
  var myBoxDiv = document.createElement('div');


  function setAttributes(el, attrs) {
    for (var key in attrs) {
      el.setAttribute(key, attrs[key]);
    }
  }

  setAttributes(myBoxDiv, {
    "id": "myBox",
    "title": "box"
  });
  myBoxDiv.style.cssText = "position:fixed; bottom: -100px; left:50%; width: 100px; height:100px; background-color: red; z-index: 1000; transform-origin: 50% 50%;";
  document.body.appendChild(myBoxDiv);


  var myBox = document.getElementById("myBox");

  setTimeout(function() {
    console.log("ok");

    myBox.animate({
      duration: 1000,
      timing: function(timeFraction) {
        return timeFraction;
      },
      draw: function(progress) {
        myBox.style.bottom = 0;
      }
    });

  }, 1000);

}

добиться того что бы квадратик показывался (bottom = 0 ) через секунду, а если на него наводишь курсором то исчезал (bottom: -100px): и потом снова показывался через секунду? Не могу понять почему анимация не отрабатывает ?

2
  • Jquery подключен?
    – Dmytro
    31 мар 2018 в 13:58
  • нет, пишу на ваниле 31 мар 2018 в 14:01

2 ответа 2

1

Не знаю как там у вас на "ваниле", на JS это можно сделать так

window.onload = function() {
  var myBoxDiv = document.createElement('div');


  function setAttributes(el, attrs) {
for (var key in attrs) {
  el.setAttribute(key, attrs[key]);
}
  }

  setAttributes(myBoxDiv, {
"id": "myBox",
"title": "box"
  });
  myBoxDiv.style.cssText = "position:fixed; bottom: -100px; left:50%; width: 100px; height:100px; background-color: red; z-index: 1000; transform-origin: 50% 50%;";
  document.body.appendChild(myBoxDiv);


  var myBox = document.getElementById("myBox");
  myBox.addEventListener("mouseenter", hiddenBlock);

function showBlock(){
 setTimeout(function() {
    myBox.style.bottom = 0;
  }, 1000);
}
showBlock();
function hiddenBlock(){
 myBox.style.bottom = "-100px";
 showBlock();
}
}

2
  • Спасибо, а можете ещё помочь что б это всё таки была анимация. Появление - типа ease-out jn -100px до 0px по bottom А не просто появление/исчезание блоков 31 мар 2018 в 15:49
  • Используйте Css свойство transition. Там огромное поле для воображения.
    – Dmytro
    31 мар 2018 в 16:15
0

$(document).ready(function() {

  $('.myBox').hover(function(even) {
     
      $('.myBox').css('display','none');
  })


  $('.myBox').mouseleave(function(even) {
    setTimeout(function(){
      $('.myBox').css('display','block');
    },1000)
    
  })

});


 
.myBox {
  width: 10px;
  height: 10px;
  border: solid 1px black;
  background: #11cc44;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="myBox"></div>

Пример простой думаю Вы сможете круче

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.