如何使用jQuery实现此效果？

Question

我真的很喜欢积木向你移动的效果和这种效果中的轻微动画，这个开发人员似乎正在使用Mootools，以及如何在jQuery中实现这种或类似效果的想法？

http://ultranoir.com/en/#!/blog/home/

Answer 1

他只为margin-left、margin-top、width和height设置动画，并为块设置更高的z-index。阴影是背景图像(比没有悬停的长方体宽和高10px)。他的箱子有固定的宽度和高度。

在悬停时，他将div在两个维度上放大10px，以便阴影背景可见，并将框移动到顶部和左侧10px。

在jQuery中，它可能是

$('#box').hover(
    function() {
        $(this).css('z-index', 200).animate({ 
             marginLeft: '-10px', 
             marginTop: '-10px', 
             width: '+=10', 
             height: '+=10' 
        });
    },
    function() {
        $(this).animate( { 
             marginLeft: '0px', 
             marginTop: '0px', 
             width: '-=10', 
             height: '-=10' 
        }, function () { $(this).css('z-index', 0); });
    }
);

我可以使用页面作者使用的背景图片来发布一个小提琴，但我认为这将是淘气的。

Answer 2

下面是一个向您移动的长方体的示例：

小提琴：http://jsfiddle.net/maniator/7hfK8/

JS：

$('#box').animate({
    height: '100px',
    width: '100px',
    left: '0px',
    top: '0px'
});

CSS：

#box {
    position: absolute;
    width 0px;
    height:0px;
    left: 50px;
    top: 50px;
    background: blue;
}

Answer 3

为什么使用JavaScript？

可以使用CSS：http://jsfiddle.net/HHRgG/来实现此效果

#block{
    border: solid 1px #000;
    height: 150px;
    width:300px;
    position: relative;
    top: 20px;
    left: 20px;
}

#block:hover
{
    top: 15px;
    left: 15px;
    box-shadow: 5px 5px 0 #000;
}

编辑：已更新处理CSS过渡以使其更漂亮

http://jsfiddle.net/HHRgG/1/