problem with animation in jquery

Question

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.

mVChr · Accepted Answer · 2011-05-26 21:11:25Z

3

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 →

answered May 26, 2011 at 21:11

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gazler · Accepted Answer · 2011-05-26 21:17:04Z

1

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

edited May 26, 2011 at 21:17

answered May 26, 2011 at 21:02

Gazler

84.4k18 gold badges285 silver badges245 bronze badges

2 Comments

Jorge Over a year ago

nice it's works the opacity but no the borders, it's not setting the borders to the div

Dormouse Over a year ago

jQuery doesn't support shorthand border properties. You'll need to use borderWidth and you must already have a border-width or border property set in the elements css

Sparky · Accepted Answer · 2011-05-26 21:03:11Z

0

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.

answered May 26, 2011 at 21:03

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Collectives™ on Stack Overflow

problem with animation in jquery

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related