Question

Question is pretty self explanatory i guess. Here is the code I’m using:

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');
        });
    }

It does everything, except setting the hovered ones opacity to 1. Any ideas?

Answer 1

Most likely this is because animate has not finished by the time the next line is executed. I would use not to filter out this li so that it doesn’t animate at all:

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');
        });
    }

Example: http://jsfiddle.net/fkaP6/