Question

我正在尝试创建一个微妙的扩展＆amp;将鼠标悬停在网络应用上的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动画

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

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

CSS，left，right＆amp; top与bottom以外的任何position值相结合（通常为static）
relative - 这为您提供了全范围的transform和2d转换，但它们只发生在元素（其渲染）的图像上而不是元素本身 - 元素保持不变，在内容流中占据相同的空间。

在您的情况下，最佳做法是使用3d，通常值为transform。但是，使用scale(1.05)的动画不是最佳做法，因为对于大多数浏览器/设备而言，使用纯jQuery应用此效果的成本较低，并且很可能会带来更好的用户体验。

2。 .mouseover()将在您悬停项目时应用转换，但您还需要使用CSS指定返回动画。通常，您希望使用.hover()，这是两者的简写：.mouseout()

示例：

.hover(function_in, function_out)

3。您似乎想要使用

执行两个动画

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

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

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

但是，作为一般规则，尽量远离$(this).animate( {...first animation...}, function(){ $(this).animate( {...second animation... } ); } );。如果您必须使用它，请将其使用限制为.animate()或transition。在可能的情况下，将其替换为opacity - 它是一个jquery插件，也可以单独使用。
尽可能使用.velocity()动画或WA-API。

鼠标悬停在actionLink上时如何创建微妙的放大？

1 个答案: