actionLinkでマウスオーバーすると微妙な拡大を作成する方法は？

Question

ウェブアプリケーションでDetails、Edit、およびDeleteのリンクにカーソルを置くと、微妙に拡張する&コントラクトエフェクトを作成しようとしています。私が持っているコードでは、何もしていません。私は正しいセレクターを持っていないと思う。

@foreach (var item in Model) { 
    <tr> 
     <td> 
      @Html.DisplayFor(modelItem => item.LastName) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.FirstMidName) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.EnrollmentDate) 
     </td> 
     <td> 
      @Html.ActionLink("Details", "Details", new { id = item.ID }) 
      @if (User.IsInRole("Admin")) 
      { 
       @:| 
       @Html.ActionLink("Edit", "Edit", new { id=item.ID })@: | 

       @Html.ActionLink("Delete", "Delete", new { id=item.ID }) 
      } 
     </td> 
    </tr> 


<script> 
    $(document).ready(function() { 
     $('#item').mouseover(function() { 
      $(this).animate({ height: '+=25', width: '+=25' }) 
        .animate({ height: '-=25', width: '-=25' });   
     }); 
    }); 
</script> 

私はjQueryの新機能です。イメージ以外のものにこのような影響を与えることができるかどうかはわかりません。

Answer 1

あなたはこのコードを記述した場合：

$(document).ready(function() { 
    $('#item').mouseover(function() { 
     $(this).animate({ height: '+=25', width: '+=25' }) 
       .animate({ height: '-=25', width: '-=25' });   
    }); 
}); 

...それの部分が良いです。

しかし、のはあまりよくない何を見てみましょう：

1.彼らはDOMであなたの要素を次ているすべてに影響しますので、あなたが... heightとwidth ...

をアニメーションべきではありません、それらを再配置させる。

DOMの要素の位置に影響を与えるものをアニメーション化すると、それに続く他のすべての要素にも影響します（DOM）。または、コンテンツフロー内の位置に影響を与えずに、要素のレンダリングにのみ影響する一連のCSS属性を使用することができます。これらは次のとおりである：static以外のposition値と組み合わせる

• left、right、top & bottom（通常relative）
• transform - これはあなたの2dと3d変換の完全な範囲を提供しますが、彼らはのみに起こります要素自体の上にない要素（そのレンダリング）のイメージ - 要素はそのまま残り、コンテンツフローの同じ量の領域を占めます。あなたのケースでは

、ベストプラクティスはscale(1.05)の値で、通常transformを使用することです。しかし、jQueryのアニメーションを使用することはベストプラクティスとはみなされません。純粋なCSSを使用してこの効果を適用すると、ほとんどのブラウザ/デバイスで安価になり、ユーザーエクスペリエンスが向上します。

2..mouseover()アイテムを置くが、あなたも.mouseout()を使用して、戻りアニメーションを指定する必要がある場合は、変換を適用します。一般的に、あなたは両方のための速記である、.hover()を使用したい：.hover(function_in, function_out)

例：

$(document).ready(function() { 
    $('#item').hover(
     function() { $(this).animate({ transform: 'scale(1.05)'}); }, 
     function() { $(this).animate({ transform: 'scale(1)'}); } 
    ); 
}); 

---

3。、 -あなたが連鎖jQueryのanimate()通話したい場合は、（第二または第三のparam必ず最後にする必要があります）コールバック関数のパラメータを使用して、それを実行する必要があり

$(this).animate({ ... }) 
     .animate({ ... }); 

を使用して、2つのアニメーションを実行するように見えますこの

$(this).animate(
    {...first animation...}, 
    function(){ 
    $(this).animate(
     {...second animation... } 
    ); 
    } 
); 

ようしかし、一般的なルールとして、.animate()から離れて滞在してみてください。使用する必要がある場合は、使用方法をtransitionまたはopacityに制限してください。可能であれば、.velocity()に置き換えてください。これはjqueryプラグインで、スタンドアロンとしても利用できます。
可能であれば、CSSアニメーション、またはWA-APIを使用してください。