jQuery / CSS НЕ селектор, а стоп () вопрос - PullRequest
Новая
       12

jQuery / CSS НЕ селектор, а стоп () вопрос

1 голос
/ 04 января 2010

Вот мой сайт:

http://www.raceramps.com/v2

Наведите указатель мыши на меню с правой стороны. Обратите внимание, что по умолчанию полностью увеличены автосервис, буксировка прицепов и демонстрация. Это потому, что они продают больше продуктов, и большинство людей, просматривающих этот сайт, ищут их.

В настоящее время есть настройка меню аккордеона с использованием следующего кода: 

$(function(){
    $( '.buttonEffectWrapper' ).hover (
        function () {

            var effect = $(this).siblings().filter(":last");
            effect.stop ().animate ( { opacity: 1}, { duration: 300 } );

            $(this).stop().parent().animate({height: "110px"}, {duration: 300 } );//accordion effect here


        },
        function () {
                    var effect = $(this).siblings().filter(":last");
                  effect.stop ().animate ( { opacity: 0}, { duration: 300 } );

                  $(this).stop().parent().animate({height: "30px"}, {duration: 300 } );//accordion effect here

        }
    );
} );

Во-первых, если вы подведете указатель мыши горизонтально над одной из кнопок несколько раз, она создаст очередь. Я думал, что использование stop () должно было исправить это, но это не так.

Во-вторых, я не хочу, чтобы первые три элемента div (# car-service, # трейлер-перевозчик и # display-and-show) рухнули, когда мышь уйдет. Я попробовал следующее, но он выбирает все еще. 

  $(this + ":not(#car-service, #trailer-hauling, #display-and-show)").stop().parent().animate({height: "30px"}, {duration: 300 } );

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

Так что, если я коснулся #car-service, то перешел к #trailer-hauling, #car-service не должно разрушиться. Но если я перейду с #trailer-hauling на #show-and-display, тогда я хочу, чтобы #car-service сократился. Это должно предотвратить повреждение интерфейса.

Ответы [ 2 ]

0 голосов
/ 04 января 2010

первый во втором аргументе animate() вы можете указать очередь: 

effect.animate({
    opacity: 1
},{
    duration: 300,
    queue: false
});

второй Попробуйте это: 

$(this).filter(function() {
    return !this.id.match(/^(car-service||trailer-hauling||display-and-show)$/);
}).someMethod()...
0 голосов
/ 04 января 2010 
if(!$(this).is("#car-service, #trailer-hauling, #display-and-show")){
   $(this).parent().animate({height: "30px"}, {duration: 300, queue:false});
}

$(this) относится к одному элементу (или группе элементов) в DOM. Я думаю, что лучше всего проверить, имеет ли он определенный атрибут или отфильтровать его, а не играть с селектором $(this).

...