Как я могу установить непрозрачность для других <li>равным 0,5 и сохранить наведенное значение на 1 при наведении курсора в jquery? - PullRequest
Новая
       8

Как я могу установить непрозрачность для других <li>равным 0,5 и сохранить наведенное значение на 1 при наведении курсора в jquery?

1 голос
/ 25 января 2012

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

function wkHover(){

    $('.worksItem').hover(function() {
            $('.worksItem').animate({ opacity: '0.5' }, 400, 'swing');
            $(this).css({ opacity : '1' });
            $(this).animate({ marginTop: '-10px' }, 400, 'swing');
        }, function(){
            $('.worksItem').animate({ opacity: '1' }, 400, 'swing');
            $(this).animate({ marginTop: '0' }, 400, 'swing');
        });
    }

Это делает все, кроме установки прозрачности накрытых в 1. Есть идеи?

Ответы [ 2 ]

4 голосов
/ 25 января 2012

Скорее всего, это потому, что animate еще не завершена к тому времени, когда будет выполнена следующая строка.Я бы использовал not для фильтрации this li, чтобы он вообще не анимировался: 

function wkHover(){

    $('.worksItem').hover(function() {
            $('.worksItem').not(this).animate({ opacity: '0.5' }, 400, 'swing');
            $(this).animate({ marginTop: '-10px' }, 400, 'swing');
        }, function(){
            $('.worksItem').animate({ opacity: '1' }, 400, 'swing');
            $(this).animate({ marginTop: '0' }, 400, 'swing');
        });
    }

Пример: http://jsfiddle.net/fkaP6/

0 голосов
/ 25 января 2012

Вот, пожалуйста.Чистый CSS: 

.foo {
    opacity: 0.5;
    margin-top: 3em;
    -moz-transition: opacity, margin-top 0.4s ease-in-out;
    -webkit-transition: opacity, margin-top 0.4s ease-in-out;
    -o-transition: opacity, margin-top 0.4s ease-in-out;
    -ms-transition: opacity, margin-top 0.4s ease-in-out;
    transition: opacity, margin-top 0.4s ease-in-out;
}

.foo:hover {
    opacity: 1;
    margin-top: 2.2em;
}

Демонстрационная версия: http://jsfiddle.net/QxMfq/5/show/

Анимация не работает в IE до версии 10, хотя.Тем не менее, результат в IE все еще солидный (только без анимации).Другое дело, что (как вы можете видеть) вы должны повторить объявление transition несколько раз для разных браузеров.Но это всего лишь небольшая цена, поскольку CSS-анимации значительно более надежны, работают лучше и проще в обслуживании.

...