problem with animation in jquery

i'm trying to put an anitmation to class that works, but no at all because i have one property that's doesn't setting and i know why check this.

$(document).ready(initialize);

function initialize() {
    $(".imagePanel").hover(mouseOver,mouseOut);
}

function mouseOver() {
    $(this).animate({
        border:"2px"
        opacity: 0.25               
    }, 100);
}

function mouseOut() {
    $(this).animate({
        border: "2px",
        opacity: 0.25
    }, 100);
}

the problem it's first that the property border it's not setting and second that don't have any idea about to remove the opacity in the function mouse out. The borders are setting开发者_开发技巧 to a div element. Thanks.

It doesn't seem that you can set the border within animate, but you can with css:

$(document).ready(initialize);

function initialize() {
    $(".imagePanel").hover(mouseOver,mouseOut);
}

function mouseOver() {
    $(this).stop(true,true).animate({
        opacity: 0.25               
    }, 100, function() {
        $(this).css('border','2px solid black');
    });
}

function mouseOut() {
    $(this).stop(true,true).css('border','0 none').animate({
        opacity: 1
    }, 100);
}

See example →

$(document).ready(function(){

    $(".imagePanel").mouseover(function() {
         $(this).animate({
             borderTopColor:"#FF00FF",
             borderBottomColor:"#FF00FF",
             borderLeftColor:"#FF00FF",
             borderRightColor:"#FF00FF",
             opacity: 0.25               
         }, 500);
    });

   $(".imagePanel").mouseout(function() {
         $(this).animate({
             borderTopColor:"#FFFFFF",
              borderBottomColor:"#FFFFFF",
             borderLeftColor:"#FFFFFF",
              borderRightColor:"#FFFFFF",
             opacity: 1
         }, 500);
    });

});

Try that.

http://jsfiddle.net/n2ugx/8/

I'm not sure your question is clear enough but there are problems in your code.

Both mouseOut() and mouseOver() functions are identical. Nothing will happen.

jQuery animate() takes the element to your specified final state from wherever it starts. Both of your functions are the same so nothing changes.