悬停时，如何使用 jQuery 动画更改多个属性

Question

我有一页全是缩略图。将鼠标悬停在一张上时，我想放大它，而不会影响其余图片的布局。

每张图片都在一个包装 div 中，当图片放大时保持静止

我可以用 CSS 做到这一点：

1. 将 z-index 从 0 更改为 1
2. 将显示属性更改为“绝对”
3. 设置 left:0 和 top:0（以防万一）

4. 然后设置 width:340px 和 height:auto （我认为 ie8 需要）。 CSS

   .wrapper:hover > .Img { 宽度:300px;位置：绝对；z-index：1；左：0；顶部：0； }

但我想为尺寸的增加制作动画。我开始使用： $('.wrapper').hover(function() {... 但后来读到悬停只能有一个功能。

所以我尝试了 mouseenter 和 mouseleave 都没有成功。

我尝试的是：

$('.Wrapper.).mouseenter(function()  {
    $('.Img').animate({ zIndex:1 },1,"swing" );                   /* this line works */
    document.getElementsByClassName('.Img').style.zIndex="1";       /*   this doesnt */
    document.getElementsByClassName('Img').style.position="absolute"/*   this doesnt */
    $('.Img').animate({ position:"absolute" },1,"swing");           /*   this doesnt */
    $('.Img').animate({width: '300px', height: '240px'},5000,"swing");
}); 
$("#testXX").mouseleave(function()  {
/*   with the reverse of above */
}); 

请有人指出我正确的方向。

--- 已编辑？稍后添加：--- 谢谢你的想法。我做了更多的研究，问题似乎是：

使用 javascript，我不知道如何将位置更改为“绝对”， 但我现在可以更改其他属性。

document.getElementById(this).position='absolute';                   doesnt work
document.getElementsByClassName('.Img').style.position="absolute";   doesnt work
$('.Img').animate({ position:'absolute' },001,'swing');              doesnt work!

我想我可以混合使用 CSS（将更改为绝对值）和 Javascript（进行其他动画），但我担心会导致页面其余部分的显示效果的顺序/时间。

fyi：CSS 版本在这里： http://www.frog-records.co.uk/.... 或者（如果您在阅读本文时解决了）动画版本将在那里;-)

Answer 1

一般情况下：不要使用 $(".Img") 多次次。请改用以下方法之一：

// Chain your methods, e.g.:
$(".Img").css({position: 'absolute'}).animate({width: '500px'});
// or store it in a var and refer to that
var img = $(".Img"); img.css(/*something*/); img.animate(/*something*/);

我假设您有多个 .Wrapper，每个里面都有一个图像，并且只想在悬停时为一个动画。但是您的$(".Img")在整个页面上捕获了 all 类“Img”的元素。在您悬停的任何 .Wrapper 上，所有图像都会同时进行动画处理。而是：

$(".Wrapper").mouseenter(function() {
    $(".Img").animate(/*something*/); // animates all images on the page
    // inside the callback function the keyword 'this' (without quotes!) refers
    // to the one .Wrapper we are actual in. 'this' is called the context of the
    // function. We can pass the context to jQuery as a second argument:

    $(".Img", this).animate(/*something*/)
    // animates only the image of the .Wrapper we are actual in
});

现在我指的是“mouseenter”函数中的五行：

第 1 行：可以为 zIndex 设置动画，因为它有一个数值，但没有任何意义。有效的 zIndex 是一个整数 (0, 1, 2, ...)，但动画输出中间值（如 0.25, 0.33, ...）某些浏览器可能会失败。 使用 .css 或 .style 设置 zIndex。

第 2 行，第 3 行： .getElementsByClassName() 返回一个 NodeList（= 一个包含元素的列表）。列表本身没有样式属性。如果您想在此列表中的元素上设置样式，则必须对其进行迭代。

var list = document.getElementsByClassName(".Img"), length = list.length;
for(var i = 0; i < length; i++) list[i].style.position = "absolute";

第 4 行： 无法为位置属性设置动画。位置可以是“静态”、“相对”、“绝对”或“固定”，但不包含动画数字。

第 5 行： 应该可以工作！所以你的'mouseenter'函数可能看起来像：

$(".Wrapper").mouseenter(function() {
    $(".Img", this).css({zIndex: 1, position: 'absolute', left: 0, top: 0})
                   .animate({width: '340px', height: '240px'}, 5000, 'swing');
});

最后：所有依赖于单个事件（'mouseenter'、'click'、...）的函数都只接受一个函数作为它们的参数（回调）。这意味着：

$("selector").mouseenter( /* Here you can pass only one function in */ );
// that looks like:
$("selector").mouseenter(function() { /* do something */ }); // but:
$("selector").mouseenter(function() {
    /* do something */ // means:
    // inside this single callback that is passed to a single-event-function
    // you can do what you want and call as much functions you need.
});

'hover' 不是单个事件，而是 mouseenter 事件和 mouseleave 事件之间的状态 .这就是为什么 jQuery 的 .hover() 是 mouseenter 和 mouseleave 事件的快捷方式。它需要一两个回调函数，如下所示：

$("selector").hover(function1, /* optional */ function2);

如果只有 function1，它会在 mouseenter 触发时调用，并在 mouseleave 触发时再次调用。如果有两个回调函数，则在 mouseenter 上调用 function1，在 mouseleave 上调用 function2。 在这两者中，您可以执行前面解释的任何操作。

最后：在您的代码中，您将“mouseleave”函数附加到另一个名为 #testXX 的元素上。如果您遇到更多问题，请使用您的 html 的重要部分更新您的问题。

Answer 2

为什么不：

$('.Wrapper').hover({function(){
    $(this).animate({
        position: 'absolute',
        /* etc */
    });
});