jquery - исчезают все дочерние элементы, кроме зависшего дочернего элемента

#jquery #hover #parent-child #fade

#jquery #наведите #родитель-потомок #исчезает

Вопрос:

Пытаюсь сделать что-то довольно простое, но это ускользает от меня. У меня есть следующий 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, но я не совсем уверен, как это сделать. Любая помощь была бы высоко оценена, спасибо!

Ответ №1:

Проблема в том, что вы добавляете новые команды в очередь анимации. Вы должны вызвать 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/

1. Дарт — есть ли какие-либо плюсы в использовании fadeTo () вместо animate ()? Вы знаете, работает ли один из них быстрее другого? Одна из моих мыслей заключалась в том, что fadeTo не полагается на «непрозрачность», которая иногда не работает в IE.

2. fadeTo() это только для удобства, возможно, легче запомнить. jQuery нормализует доступ к свойствам css, поэтому вам не нужно беспокоиться о непрозрачности в IE, он будет делать все, что ему нужно, в нестандартных браузерах. На самом деле в документах указано, что использование fadeTo с длительностью 0 совпадает с прямой настройкой .css('opacity', value) .

3. Как вы можете сделать то же самое, но затем с помощью imagebuttons?

4. @Rafael Это должно работать с любой разметкой, просто измените ваши селекторы соответствующим образом. Какую разметку вы используете в качестве своих «imagebuttons»?

Ответ №2:

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

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

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

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

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