jqueryコンテンツの膨大な効果の支援

jquery .animateと.hoverを使用して小さな "膨れ"効果を構築しようとしています。 mouseinイベントはうまくいくように見えますが、マウス上ではマージンが元の位置にスナップし、元の状態に戻ります。展開する要素が必要な場合は、他の要素の位置を変更せずに戻ります。jqueryコンテンツの膨大な効果の支援

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でこれを持っています。

ご協力いただければ幸いです。

出典

2012-04-13 HipsterManic

私は自分自身の答えを作成することができませんでしたが、私は、フローティングレイアウトは継続頭痛になります疑う助けることはできません。静的レイアウトを持たなければならないか、ホバリングされた要素のレイアウトをアニメーション化している間に絶対的に絶対的に変換し、その後縮小して浮動させる必要があります。 –

これは私が何ができるかです....

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-13 18:33:07

助けてくれてありがとう。私は私のコードの前に戻ってくるときに提案を試してみます。 – HipsterManic

ここで提案をしようとしましたが、それでも私の満足にはうまくいきませんでした。私はhoverpulseと呼ばれるプラグインを見つけました。わずかな変更を加えて、私が達成しようとしているものに対して完全に機能します。誰でもこのプラグインに興味がある場合：http://jquery.malsup.com/hoverpulse/ – HipsterManic

はこちらの提案を試みたが、それはまだdidnの私は満足しています。私はhoverpulseと呼ばれるプラグインを見つけました。わずかな変更を加えて、私が達成しようとしているものに対して完全に機能します。誰もがこのプラグインに興味がある場合は、次の（！jQのアニメーションではない私の強いポイント）hoverpulse plugin

出典

2012-04-17 15:45:03 HipsterManic

jqueryコンテンツの膨大な効果の支援

答えて

関連する問題