Question

我有这个代码尝试调整图像大小，并在其周围添加10px纯红色边框。我想出了如何调整图像大小，但无法弄清楚如何设置它的动画，以便当我用鼠标悬停在它上面时，会出现一个红色边框。任何帮助深表感谢。我觉得我很亲密，但还没到那里。谢谢大家！

<!DOCTYPE html>
<html>
<head>
<title>Image Resize</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
$(function() {
    var ht = $("img").height(),
        wd = $("img").width(),
        mult = 1.5; 

    $("img").on('mouseenter', function () {
        $(this).animate({
            height: ht * mult,
            width: wd * mult,
        }, 500);
    });

    $("img").on('mouseenter', function () {
        $(this).animate({"border" : "10px solid red"} , "slow");
    });

    $("img").on('mouseleave', function () {
        $(this).animate({
            height: ht,
            width: wd
        }, 500);
    })

    $("img").on('mouseleave', function (){
        $(this).animate({"border-radius" : "0px"}, "slow");
    });
});
</script>


</head>


<body>

<img src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_google_box.png" width="200" height="200"  alt="" />

</body>



</html>

Answer 1

You cannot animate the color but you can animate the boderwidth:

$('img').mouseenter(function () {
    $(this).css({border: '0 solid red'}).animate({
        borderWidth: 10
    }, 500);
    }).mouseleave(function () {
     $(this).animate({
        borderWidth: 0
    }, 500);
});

Answer 2

你试过悬停吗？有一个过度和完全的功能

$(".ImageBorder").hover(
    function () {
        $(this).css("border", "10px solid red");
    },
    function () {
        $(this).css("border", "0px none");
    }
);

使用JQuery盘旋时，在图像周围创建边框

2 个答案: