2

我正在尝试使用 jquery .animate 和 .hover 构建一个小的“膨胀”效果。mousein 事件似乎运行良好，但是，在鼠标移出时，边距会恢复到原始位置，动画会恢复到原始状态。我需要扩展元素，然后返回而不更改任何其他元素的位置。

JS：

$(document).ready(function(){       
    $(".nav-item").hover(
        function(){
            $(this).addClass('over');
            $(this).animate({
                width: '114px', 
                height:'114px', 
                margin: '-7px'}, 
                300);
        },
        function(){
            $(this).removeClass('over');
            $(this).animate({
                width:'100px',
                height:'100px',
                margin: '0'},
                300);}
    );
});

html:

<body>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
</body>

CSS：

.nav-item {
background: #ffffff;
border: 1px #000000 solid;
border-collapse: collapse;
float: left;
height: 100px;
position: relative;
width: 100px;
}

.over {
z-index: 1;
}

我在jsfiddle有这个。

任何帮助，将不胜感激。

4

2 回答 2

0

这是我能做的......

jQuery代码

$(document).ready(function(){
    var left=0;
    $(".nav-item").each(function(){
        $(this).css({left:left=left+100});
        console.log(left);
    })
    $(".nav-item").hover(function() {
        $(this).addClass('over');
        $(this).animate({
            width: '114px',
            height: '114px',
            margin: '-7px'
        }, 300);
        },function() {
            $(this).removeClass('over');
            $(this).animate({
                width: '100px',
                height: '100px',
                margin: '0'
            }, 300);
        }
    )
    })

以及CSS中的一些变化

.nav-item {
    background: #ffffff;
    border: 1px #000000 solid;
    float: left;
    height: 100px;
    width: 100px;
    position: absolute;
}

.over {
    z-index: 1;   
    overflow: hidden;    
}
于 2012-04-13T18:33:07.450 回答
0

在这里尝试了建议，但它仍然没有让我满意。我发现了一个名为 hoverpulse 的插件，稍加修改后，它就可以完美地完成我想要完成的任务。如果有人对此插件感兴趣：hoverpulse plugin

于 2012-04-17T15:45:03.497 回答