javascript - 将鼠标悬停在 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。您不应该为 height 和 width...

设置动画

...因为它们会影响 DOM 中元素之后的所有内容，导致它们重新定位。

当您为任何会影响元素在 DOM 中的位置设置动画时，它也会影响 DOM 中跟随它的所有其他内容。作为替代方案，您可以使用一组仅影响元素呈现而不影响其在内容流中的位置的 CSS 属性。它们是:

• left、right、top 和 bottom 结合任何 position 值除了static(通常是relative)
• transform - 这为您提供了全方位的 2d 和 3d 转换，但它们只发生在元素的图像上(它的渲染) 而不是在元素本身上 - 元素保持不变，在内容流中占据相同数量的空间。

在您的情况下，最佳做法是使用 transform，通常使用 scale(1.05) 的值。然而，使用 jQuery 的 animate 并不被认为是最佳实践，因为使用纯 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.你似乎想执行两个动画，使用

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

如果你想链接 jQuery 的 animate()调用，你需要使用回调函数参数(它应该总是最后一个 - 第二个或第三个参数)来完成它，就像这样

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

但是，作为一般规则，尽量远离 .animate()。如果您必须使用它，请将其使用限制为 transition 或 opacity。在可能的情况下，将其替换为 .velocity() - 它是一个 jquery 插件，也可作为独立版本使用。
尽可能使用 CSS 动画，或 WA-API .