制作边框缩放效果

Question

使用JavaScript如何制作边框缩放效果？

div1的边框扩展到div2的大小。理想情况下，我想将效果的开头附加到某个事件。并在效果完成后收到回电。我也希望能够扭转这一局面。

Answer 1

如果我明白你想要什么，我认为就是这样：

var div1DefaultWidth = $('.div1').css('width');
var div1DefaultHeight = $('.div1').css('height');

var div2DefaultWidth = $('.div2').css('width');
var div2DefaultHeight = $('.div2').css('height');

$(document).on('mouseenter','.div1',function(){
    $(this).stop().animate({
        'width':div2DefaultWidth,
        'height':div2DefaultHeight
    },{duration:250, complete:function(){
        $(this).hide();
        $('.div2').show();
    }
    });
}).on('mouseleave','.div2',function(){
    $(this).hide();
    $('.div1').show().stop().animate({
        'width':div1DefaultWidth,
        'height':div1DefaultHeight
    });
});

小提琴：

http://jsfiddle.net/Y336m/2/

<强>更新：

如果您的元素有不同的padding/margin/top/left，请使用：

var div1DefaultWidth = $('.div1').css('width');
var div1DefaultHeight = $('.div1').css('height');
var div1DefaultTop = $('.div1').css('top');
var div1DefaultLeft = $('.div1').css('left');
var div1DefaultMargin = $('.div1').css('margin');
var div1DefaultPadding = $('.div1').css('padding');

var div2DefaultWidth = $('.div2').css('width');
var div2DefaultHeight = $('.div2').css('height');
var div2DefaultTop = $('.div2').css('top');
var div2DefaultLeft = $('.div2').css('left');
var div2DefaultMargin = $('.div2').css('margin');
var div2DefaultPadding = $('.div2').css('padding');

$(document).on('mouseenter','.div1',function(){
    $(this).stop().animate({
        'width':div2DefaultWidth,
        'height':div2DefaultHeight,
        'top':div2DefaultTop,
        'left':div2DefaultLeft,
        'margin':div2DefaultMargin,
        'padding':div2DefaultPadding
    },{duration:250, complete:function(){
        $(this).hide();
        $('.div2').show();
    }
    });
}).on('mouseleave','.div2',function(){
    $(this).hide();
    $('.div1').show().stop().animate({
        'width':div1DefaultWidth,
        'height':div1DefaultHeight,
        'top':div1DefaultTop,
        'left':div1DefaultLeft,
        'margin':div1DefaultMargin,
        'padding':div1DefaultPadding
    });
});

小提琴：

http://jsfiddle.net/Y336m/3/