CODEWITHSUNDEEP
jquerycssjquery-animatejquery-hover
Jorge
Jorge

Reputation: 18237

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.

Upvotes: 0

Views: 105

Answers (3)

Gazler
Gazler

Reputation: 84140

$(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/

Upvotes: 1

mVChr
mVChr

Reputation: 50177

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 →

Upvotes: 3

Sparky
Sparky

Reputation: 98718

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.

Upvotes: 0

Related Questions