jquery - исчезают все дети, кроме детей - PullRequest
Новая
       25

jquery - исчезают все дети, кроме детей

0 голосов
/ 25 мая 2011

Пытаюсь сделать что-то довольно простое, но это ускользает от меня.У меня есть следующий HTML-код: 

<div id="four">
                <div id="thumb1" class="suiting-thumb">
                    <img src="img/gallery/suit1-thumb.jpg" alt="" title="" />
                </div>


               <div id="thumb2" class="suiting-thumb">
                    <img src="img/gallery/suit2-thumb.jpg" alt="" title="" />
                </div>


               <div id="thumb3" class="suiting-thumb">
                    <img src="img/gallery/suit3-thumb.jpg" alt="" title="" />
                </div>
</div>

Все, что я хотел бы сделать, это "затемнить" дочерние элементы родительского элемента div, ЗА ИСКЛЮЧЕНИЕМ для ребенка, находящегося под охраной.Я успешно делаю это с этим фрагментом jQuery, но между постепенным исчезновением / входом есть небольшая задержка: 

$('.suiting-thumb').hover(function() {
                var thumbBtnIdPrefix = 'thumb';
                var thumbBtnNum = $(this).attr('id').substring((thumbBtnIdPrefix.length));
                $('.suiting-thumb:not(#thumb' + thumbBtnNum + ')').animate({
                    "opacity": .3
                }),200;             
            },
            function() {
                $('.suiting-thumb').animate({
                    "opacity": 1
            }),200;
        });

Мне кажется, что мне нужно исчезнуть все дочерние элементы родительского divвыбрав #four с моим оператором hover, но я не совсем уверен, как это сделать.Любая помощь будет высоко ценится, спасибо!

Ответы [ 2 ]

5 голосов
/ 25 мая 2011

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

$('.suiting-thumb').hover(function() {
    var thumbBtnIdPrefix = 'thumb';
    var thumbBtnNum = $(this).attr('id').substring((thumbBtnIdPrefix.length));
    $('.suiting-thumb:not(#thumb' + thumbBtnNum + ')').stop().animate({
        "opacity": .3
    }), 200;
}, function() {
    $('.suiting-thumb').stop().animate({
        "opacity": 1
    }), 200;
});

http://jsfiddle.net/ywUUL/1/

0 голосов
/ 25 мая 2011

Это должно сработать: 

$('.suiting-thumb').hover(function() {
                $('.suiting-thumb').not(this).animate({
                    "opacity": .3
                },200);

                $(this).animate({
                    "opacity": 1
                },200);
        });

Таким образом, анимация выполняется параллельно. Я также несколько оптимизировал селектор, чтобы сделать его более читабельным и анимировать только те элементы, которые нуждаются в анимации.

Обратите внимание, что вам нужно дождаться окончания анимации при наведении, прежде чем начнется следующая. Если вы хотите, чтобы это было мгновенно, обязательно вызовите $ ('. Suiting-thumb'). Stop (true, false ), чтобы немедленно остановить все анимации и затем запустить следующую анимацию.

...