jQuery Animate - border color and width

Question

I cannot seem to get this jQuery animation working for applying a border to an image on mouseenter:

    

        
                      

              相关标签:
       
      

Answer 1

Fixed code:

http://jsfiddle.net/9qwmX/491/

$('div img').mouseenter(function () {
    $(this).css({
        outline: "0px solid transparent"
    }).animate({
        outlineWidth: '4px',
         outlineColor: '#f37736'
    }, 500);
}).mouseleave(function () {
    $(this).animate({
         outlineWidth: '0px',
         outlineColor: '#037736'
    }, 500);
});

Answer 2

You have some typos in your code

1. .mousenter should be .mouseenter

2. didnt close the apostrophe in both 'borderColor. change them to 'borderColor'

$('div img').mouseenter(function(){
    $(this).css("border", "0px solid #f37736").animate({
        'borderWidth': '4px',
        'borderColor': '#f37736'
    },500);
}).mouseleave(function(){
     $(this).animate({
        'borderWidth':'0px',
        'borderColor':'#f37736'
    },500);
});

Answer 3

$.animate() works only on CSS properties that have single numeric values. Thus, you only need to specify the border's width, as the border-color property is ignored by $.animate().

Other than that, the event is mouseenter, not mousenter.

Here is the fixed code:

$('div img').mouseenter(function () {
    $(this).css({border: '0 solid #f37736'}).animate({
        borderWidth: 4
    }, 500);
}).mouseleave(function () {
     $(this).animate({
        borderWidth: 0
    }, 500);
});

Demo

Answer 4

Change your jQUERY to this

$('div img').mouseenter(function(){
    $(this).css("border", "0px solid #f37736").animate({
        'borderWidth': '4px',
        'borderColor': '#f37736'
    },500);
}).mouseleave(function(){
     $(this).animate({
        'borderWidth':'0px',
        'borderColor':'#f37736'
    },500);
});

Answer 5

jQuery cannot animate color but its own, you need to include a seperate jQuery plugin for that.