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プラグイン

于 2012-04-17T15:45:03.497 に答える