Javascript 当鼠标滑过actionLink时，如何创建细微的放大效果？_Javascript_Jquery_Css

Javascript 当鼠标滑过actionLink时，如何创建细微的放大效果？

javascript jquery css

Javascript 当鼠标滑过actionLink时，如何创建细微的放大效果？,javascript,jquery,css,Javascript,Jquery,Css,当我将鼠标悬停在web应用程序上的详细信息、编辑、和删除链接上时，我试图创造一种微妙的扩展和收缩效果。用我的代码，它什么也没做。我想我没有正确的选择 @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.LastName) </td> <td>

当我将鼠标悬停在web应用程序上的

详细信息

、

编辑

、和

删除

链接上时，我试图创造一种微妙的扩展和收缩效果。用我的代码，它什么也没做。我想我没有正确的选择

@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>

@foreach（模型中的变量项）{
@DisplayFor（modelItem=>item.LastName）
@DisplayFor（modelItem=>item.FirstMidName）
@DisplayFor（modelItem=>item.EnrollmentDate）
@ActionLink（“详细信息”，“详细信息”，新的{id=item.id}）
@if（User.IsInRole（“Admin”））
{ 
@:|
@ActionLink（“编辑”，“编辑”，新的{id=item.id}）@：|
@ActionLink（“删除”，“删除”，新的{id=item.id}）
}
$（文档）.ready（函数（）{
$（“#项”）.mouseover（函数（）{
$（this）.animate（{高度：'+=25'，宽度：'+=25'}）
.animate（{高度：'-=25'，宽度：'-=25'}）；
});
});

我对jQuery非常陌生，因此我不确定我是否能对图像以外的事物产生这种影响。

如果您编写了以下代码：

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

…部分是好的

但让我们看看有什么不太好：

1.您不应该设置
高度
和
宽度
的动画。

…因为它们会影响

DOM

中元素后面的所有内容，导致它们重新定位

当您为任何会影响元素在

DOM

中位置的内容设置动画时，它也会影响

DOM

中紧随其后的所有其他内容。或者，您可以使用一组

CSS

属性，这些属性只影响元素渲染，而不影响元素在内容流中的位置。它们是：

```
左侧
```
，
```
右侧
```
，
```
顶部
```
和
```
底部
```
与
```
静态
```
以外的任何
```
位置
```
值组合（通常为
```
相对
```
）
```
transform
```
-这为您提供了一系列的
```
2d
```
和
```
3d
```
变换，但它们只发生在元素的图像（其渲染）上，而不是元素本身-元素保持不变，在内容流中占据相同的空间

在您的情况下，最佳做法是使用

变换

值通常为

比例（1.05）

。但是，使用

jQuery

的动画并不被认为是最佳实践，因为使用纯

CSS

应用此效果对于大多数浏览器/设备来说成本较低，并且很可能会带来更好的用户体验

2.将在您悬停项目时应用转换，但您还需要使用

.mouseout（）

指定返回动画。通常，您要使用，这是两者的简写：

.hover（function\u in，function\u out）

例如：

$（文档）.ready（函数（）{
$（“#项”）。悬停(
函数（）{$（this）.animate（{transform:'scale（1.05）}）；}，
函数（）{$（this）.animate（{transform:'scale（1）}）；}
);
});

3。您似乎希望使用

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

如果要链接jQuery的调用，需要使用callback函数参数（应该始终是last-2nd或3rd参数），如下所示

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

但是，作为一般规则，请尽量远离

.animate（）

。如果必须使用它，请将它的使用限制在

transition

或

opacity

。如果可能，请将其替换为

.velocity（）

-它是一个jquery插件，也可以独立使用。

在可能的情况下，使用

CSS

动画，或者。

您需要向我们显示呈现的HTML，而不是循环代码。此外，您很可能不需要使用jQuery来满足您的要求-您可以使用CSS转换。对不起，呈现的HTML是什么？My Layout.cshtml？对于我的作业，我需要使用某种jQuery函数。您需要的选择器使用目标id（

）。您的用例让我觉得您应该使用类来定位元素（

）我必须使用id创建新的类定义吗？

（“.item”）

什么都不做。我碰巧相信你当前任务的目标是让你有机会学习如何正确使用现有文档。你的问题是：“我不知道如何使用jQuery的文档，其他人能帮我吗？”如果我们做了你应该为你做的事情，你就不会学到你应该学的东西。（这就是如何在没有任何帮助的情况下自己找到答案）。jQuery是最好的文档库之一。如果你不能处理jQuery，你将在其他方面遇到很多麻烦。谢谢你提供的详细信息。