Question

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

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/

Answer 4

试试这个

http://jsfiddle.net/RNuEu/7/

<script>
$(document).ready(function() {
    $('#box').hover(

    function() {
        $(this).css('z-index', 200).animate({

            marginTop: '-10px',
        });
    }, function() {
        $(this).animate({

            marginTop: '0px',

        }, function() {
            $(this).css('z-index', 200);
        });
    })
});
</script>
<style>
#box {
    position: absolute;
    width 30px;
    height:60px;
    left: 50px;
    top: 50px;
    background: yellow;
}
</style>
<div id="box">test</div>

如何使用jQuery实现此效果

4 个答案: