javascript - 制作边框缩放效果

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
    });
});

fiddle :

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
    });
});

fiddle :

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