我怎样才能用jQuery达到这种效果 [英] How can I achieve this effect with jQuery

问题描述

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

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

解决方案

他只为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); });
    }
);

我可以使用页面作者使用的背景图像来摆弄小提琴，但是我认为这很顽皮.

I really like the effect of the blocks moving towards you and slight animation in this effect, this developer seems to be using Mootools, and ideas on how to achieve this or a similar effect in jQuery?

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

解决方案

He only animates the margin-left, margin-top, width and height and sets a higher z-index for the block. The shadow is a background image (10px wider and higher than the box without hover). He has a fixed width and height for the boxes.

On hover he enlarges the div by 10px in both dimensions so the shadow background comes visible and also moves the box 10px to top and left.

In jQuery it could be

$('#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); });
    }
);

I could post a fiddle using the background images the author of the page uses, but I think that would be naughty.

这篇关于我怎样才能用jQuery达到这种效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！