Обработка нескольких вызовов setInterval - PullRequest
Новая
       6

Обработка нескольких вызовов setInterval

0 голосов
/ 18 октября 2011

У меня проблемы с разработкой, как создать простой эффект pop-and-drop для класса div. Так как события onmouseover каждого из элементов в этом классе в настоящее время вызывают одну и ту же функцию, быстрое наведение курсора между элементами div оставляет предыдущий элемент div застрявшим на полпути (при наведении курсора мыши внизу элемента div вы увидите эффект Я пытаюсь произвести).

Мой текущий подход также требует от меня репликации довольно большого количества кода для вызова функции из каждого отдельного обработчика событий div, поэтому, если есть способ объединить их в одну функцию, мне бы очень хотелось узнать, как это сделать. Я уверен, что есть простой и эффективный способ сделать все это, просто не могу решить это.

Пример jsFiddle: http://jsfiddle.net/DvXDb/

Вот мой код (скрипт внизу): 

div.bouncer{
       position:relative;
        top:50px;
    }




    function next(elem) {
        do {
            elem = elem.nextSibling;
        } while (elem && elem.nodeType != 1);
        return elem;
    }
    var thisDiv; var nextDiv; var selDiv;
    var containerDivList = document.getElementsByClassName("container");
    var containerArray = Array.prototype.slice.call(containerDivList);
    var container1 = containerArray[0];
    var container2 = containerArray[1];
    var container3 = containerArray[2];
    var container4 = containerArray[3];
    container1.onmouseover = function () {
        callPop(this.getElementsByTagName('div')[0]);
    }
    container1.onmouseout = function () {
        callDrop(this.getElementsByTagName('div')[0]);
    }
    container2.onmouseover = function () {
        callPop(this.getElementsByTagName('div')[0]);
    }
    container2.onmouseout = function () {
        callDrop(this.getElementsByTagName('div')[0]);
    }
    container3.onmouseover = function () {
        callPop(this.getElementsByTagName('div')[0]);
    }
    container3.onmouseout = function () {
        callDrop(this.getElementsByTagName('div')[0]);
    }


    var relativeHeights = ['0px', '5px', '10px', '15px', '20px', '25px', '30px', '35px', '40px', '45px', '50px'];
    var index = 10;
    var intervalHandle1;
    function callPop(thisDiv) {
        clearInterval(intervalHandle1);
        selDiv = thisDiv;
        intervalHandle1 = setInterval(popImage, 5);
    }
    function callDrop(thisDiv) {
        clearInterval(intervalHandle1);
        selDiv = thisDiv;
        intervalHandle1 = setInterval(dropImage, 5);
    }
    function popImage() {
        selDiv.style.top = relativeHeights[index];
        index--;
        if (selDiv.style.top === '0px') {
            index = 0;
        }
    }
    function dropImage() {
        index++;
        selDiv.style.top = relativeHeights[index];
        if (selDiv.style.top === '50px') {
            index = 10;
        }
    }

1 Ответ

1 голос
/ 24 октября 2011

Вот пример использования jQuery, вы действительно должны использовать Framework для таких вещей. Они все упрощают.

http://jsfiddle.net/AEJY9/

$(function () {

$('.bouncer').hover(
  function () {
    $(this).stop().animate({
      top: 10
      }, 500);
  },
  function () {
    $(this).stop().animate({
      top: 50
      }, 500);
  }
);


});
...