При наведении, отложенная последовательность переключения - PullRequest
Новая
       52

При наведении, отложенная последовательность переключения

2 голосов
/ 24 апреля 2011

все!Я не очень хорошо разбираюсь в JS / JQuery, поэтому мне нужна помощь здесь ...

У меня есть страница как по вертикали, так и по горизонтали.На этой странице у меня есть серия концентрических кругов с кнопкой в ​​центре.

Я хочу выполнить следующее:

  • Страница загружается со всеми скрытыми кругами (легко сделать с помощью дисплея css: нет;)
  • Когда «кнопка» в центре наведена, я хочу, чтобы круги постепенно исчезали - в порядке от наименьшего к наибольшему
  • Когда 'кнопка 'отключена, я хочу, чтобы круги постепенно исчезали - от самого большого до самого маленького

Все круги являются отдельными элементами DIV, никогда не перекрывая друг друга.

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

Спасибо всем, кто помогает!

Снимок экрана: http://cl.ly/6CJR

ВСЕ КОД: http://cssdesk.com/cNeCx

Пожалуйста, просмотрите в Webkit!

Ответы [ 2 ]

1 голос
/ 24 апреля 2011

Возможно, есть более чистый способ написания вызовов setTimeout с использованием jQuery, но это работает. 

$(function() {
    var $circles = $('div.wrap4 > div:not(#box)').css('opacity', 0),
        numCircles = $circles.length,
        duration = 200,
        fadeIns = [],
        fadeOuts = [];

    function getNextCallback(s, o) {
        return function() {
            $(s).animate({opacity: o}, duration);
        };
    }

    function stopFadeIn() {
        var i = fadeIns.length;
        while (i--) {
            clearTimeout(fadeIns[i]);
        }
        fadeIns = [];
        $circles.stop();
    }

    function stopFadeOut() {
        var i = fadeOuts.length;
        while (i--) {
            clearTimeout(fadeOuts[i]);
        }
        fadeOuts = [];
        $circles.stop();
    }

    $('#box').hover(function() {
        // button mouseover
        var start = numCircles,
            i = 0;

        stopFadeOut();

        while (start--) {
            fadeIns.push(setTimeout(getNextCallback('#cc' + start, 1), duration * i++));
        }
    }, function() {
        // button mouseout
        var i, end = numCircles;

        stopFadeIn();

        for (i = 0; i < end; i++) {
            fadeOuts.push(setTimeout(getNextCallback('#cc' + i, 0), duration * i));
        }
    });
});

Демо: http://jsfiddle.net/mattball/xkLgf/

Fin.

0 голосов
/ 24 апреля 2011

Посмотрите на fadeIn () документы. Вы можете передать дополнительный параметр, который называется функцией завершения анимации. Затем вы можете связать эффекты как в: 

$('#circle1').fadeIn(500, function() {
    $('#circle2').fadeIn(500, function () {
        // more fadeIn()s ...
    });
});
...