jQuery tạo màu đường viền animate khi di chuột?

Question

Sử dụng color plugin để tạo hiệu ứng màu nền khi di chuột.

$(function() { 
    $('.listing-2 li a').mouseover(function() { 
     $(this).animate({ 
      backgroundColor: "#0e7796" 
     }, 'fast'); 
    }); 
    $('.listing-2 li a').mouseout(function() { 
     $(this).animate({ 
      backgroundColor: "#d6f2c5" 
     }, 'fast'); 
    }); 
}); 

Làm cách nào tôi có thể làm tương tự cho màu đường viền?

Answer 1

Tìm thấy trong google

$('.listing-2 li a').mouseover(function() { 
    $(this).animate({ borderTopColor: "#0e7796" }, 'fast'); 
}); 
$('.listing-2 li a').mouseout(function() { 
    $(this).animate({ borderTopColor: "#fff" }, 'fast'); 
}); 

nó phải là một "borderTopColor" (hoặc trái, phải, phía dưới) thay vì "borderColor".

Answer 2

Để biến đổi màu của toàn bộ sử dụng biên giới:

$(this).animate({ borderTopColor: '#59b4de', borderLeftColor: '#59b4de', borderRightColor: '#59b4de', borderBottomColor: '#59b4de' }, 'fast'); 

Rõ ràng, bạn cần phải xác định tất cả.

Answer 3

Bạn có thể thử này:

$(this).animate({border: "3px solid #FFF55B"}, 100);   

Answer 4

này cũng làm việc.

$("div.item").hover(function() { 
    $(this).stop().animate({"border-color": "#999999"}, "slow"); 
}, 
function() { 
    $(this).stop().animate({"border-color": "#BFBFBF"}, "slow"); 
}); 

Answer 5

Tôi gặp sự cố tương tự. Tôi dường như không có tệp jQuery-UI được đính kèm với tài liệu của tôi. Khi tôi đính kèm nó. Mọi thứ hoạt động hoàn hảo với câu trả lời "C. Spencer Beggs".

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script> 

Answer 6

Animate jQuery chỉ chấp nhận giá trị số. Xem [tài liệu]:

Bạn có thể sử dụng plugin jQuery.Color hoặc sử dụng giao diện người dùng jQuery mở rộng hoạt ảnh và cho phép bạn sử dụng các giá trị không phải số trong animate.

Thưởng thức

Answer 7

Là một giải pháp thay thế cho các giải pháp jQuery, bạn có thể tạo hiệu ứng màu đường viền với chuyển tiếp CSS. Vì bạn đang tạo hoạt ảnh cho số background-color với fast, bạn muốn sử dụng quá trình chuyển đổi 200ms.

Trường hợp của bạn

.listing-2 li { 
    border:1px solid #d6f2c5; 
    transition: border 200ms ease-in-out; 
} 

.listing-2 li a:hover { 
    border:1px solid #0e7796; 
} 

Generic Ví dụ

body { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.container { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid #d6f2c5; 
 
    transition: border 200ms ease-in-out; 
 
} 
 
.container:hover { 
 
    border: 1px solid #0e7796; 
 
}

<div class="container"></div>