Как сделать так, чтобы div упал с верхней части страницы и отскочил, где я нажал? - PullRequest
Новая
       10

Как сделать так, чтобы div упал с верхней части страницы и отскочил, где я нажал?

0 голосов
/ 06 февраля 2012

Вот моя попытка до сих пор http://thezoo.com/test/

В http://tooltipsy.com/samples.html его седьмой пример внизу страницы, помеченной «Больше экстремальных - как насчет падения с неба», заставляет div падать с верхней части страницы и подпрыгивать над полем, по которому щелкнули.

Я пытаюсь заставить его код работать независимо от его подпрограмм всплывающей подсказки, просто работать с базовыми библиотеками jquery и UI. Его уникальное предложение миру - падение с верхней части страницы. Я попробовал несколько функций onclick на div или используя триггер ссылки и заменил его 1-ю строку следующим: $ ( 'Mydiv'). Выберите (функция () { но пока не повезло. Что мне не хватает? Я хотел бы использовать процедуру падения с неба с Qtip2 или ClueTip.

Вот как он это сделал: 

$('.hastip').tooltipsy({
    offset: [-10, 0],
    show: function (e, $el) {
        $el.css({
            'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) - 50 + 'px',
            'opacity': '0.0',
            'display': 'block'
        }).animate({
            'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) + 50 + 'px',
            'opacity': '1.0'
        }, 300);
    },
    hide: function (e, $el) {
        $el.slideUp(100);
    }
});

Спасибо за помощь.

Ответы [ 2 ]

6 голосов
/ 06 февраля 2012

Вот jsfiddle с рабочей демонстрацией:

http://jsfiddle.net/apHLu/4/

Там нет fadeOut и других эффектов, только отскок сверху.Я надеюсь, вы получите общее представление о том, как это работает, и адаптируетесь к вашим потребностям;

2 голосов
/ 06 февраля 2012

Простая замена его первой строки вашим селектором не сработает, потому что он создает обратные вызовы и передает их своей функции всплывающей подсказки. Вместо этого вам нужно выполнить анимацию непосредственно в функции .click (). Примерно так: 

$('mydiv').click(function(){ 
    $(this).css({
        'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) - 50 + 'px',
        'opacity': '0.0',
        'display': 'block'
    }).animate({
        'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) + 50 + 'px',
        'opacity': '1.0'
    }, 300);
}

Я нигде не проверял, так что, вероятно, это не сработает, но это должно указать вам правильное направление. Также обратите внимание, что его «бодрость» происходит от свойства easeOutBounce. Это говорит анимационной структуре пытаться интерполировать позицию div на основе его начальных и конечных параметров. Обычно в нем достаточно встроенных настроек по умолчанию (например, easeIn, easeOut и т. Д.)

Надеюсь, это поможет.

...