jquery - 如何设置其他的不透明度为 0.5 并在 jquery 中悬停时保持悬停在 1？

Question

我猜这个问题很不言自明。这是我正在使用的代码：

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。有什么想法吗？

Answer 1

这很可能是因为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/

Answer 2

干得好。纯 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 动画明显更健壮，性能更好，并且更容易维护。