Проверьте, не зависает ли мышь на каком-либо объекте - PullRequest
Новая
       16

Проверьте, не зависает ли мышь на каком-либо объекте

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

У меня есть анимация jQuery пример здесь : http://jsfiddle.net/p7Eta/

Мне бы хотелось, чтобы все заголовки выскакивали, если мышь вообще не находится внутри контейнера div. Я пытался сделать что-то вроде: 

$("#container").mouseout(

     function() {
    //slides spans up
    $('.popup').stop().animate({
        bottom: 0 + 'px'
    });

});

Но это не работает с предыдущими анимациями. Как правильно достичь этого эффекта?

РЕДАКТИРОВАТЬ: Я хотел бы что-то похожее на это: http://jsfiddle.net/RE3XK/ но при наведении курсора мышки я бы хотел, чтобы названия отдельных диапазонов появлялись, как в первом примере, вместо того, чтобы иметь их все * 1017 исчезнуть *

Ответы [ 5 ]

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

Вы имеете в виду, как это.

Проверьте рабочий пример http://jsfiddle.net/p7Eta/8/

Обновление 

$("#slider div.popup").hover(
function() {

    //slides spans up
    $('span', this).animate({
        bottom: 0 + 'px'
    });
}, function() {

    //slides spans down
    $('span', this).animate({
        bottom: '-' + 200 + 'px'
    });
});

$(document).mouseover(
function(e) {
    e.stopPropagation()
    $('#slider div.popup').find(' span').animate({
        bottom: 0
    });
});
1 голос
/ 12 апреля 2011

Наконец, jsFiddle сотрудничал ...

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

Вот рабочий пример: http://jsfiddle.net/p7Eta/41/

И код: 

// JavaScript Document

//When div.popup is moused over moused over
$("#slider div.block").hover(

function() {

    //slides spans up
    $(this).addClass('hovered');
    $(this).find('span').stop().animate({
        bottom: '0px'
    });
}, function() {
$(this).removeClass('hovered');
    //slides spans down
    $(this).find('span').stop().animate({
        bottom: '-200px'
    });
});

$('#container').hover(function() {
    $('#slider div.block:not(.hovered) span').animate({
        bottom: '-200px'
    });
}, function() {
    $('#slider div.block span').stop().animate({
        bottom: '0px'
    });
});
1 голос
/ 12 апреля 2011

Полагаю, вы идете за чем-то вроде этого , я прав? Единственная проблема, с которой я столкнулся, заключается в том, что элемент, на который вы вводите, также скользит вниз (чего, наверное, не должно быть).

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

Пожалуйста, уточните, что вы просите.Вы

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

Кстати, ваш оригинальный скрипт работает только в IE.Если вас интересует только один браузер, скажите об этом в будущем.Пользователи IE, вероятно, меньшинство на SO.

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

Или что-то вроде этого ... которое фактически останавливает анимацию перед ее сбросом. http://jsfiddle.net/NDtMW/

...