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

Question

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

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

我可以通过 CSS 来做到这一点:

1. 将 z 索引从 0 更改为 1
2. 将显示属性更改为“绝对”
3. 设置 left:0 和 top:0(以防万一)

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

   .wrapper:hover > .Img { 宽度:300px;position:absolute；z 索引: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(执行其他动画)，但我担心顺序/时间会导致页面其余部分的显示效果。

仅供引用: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，每个 .Wrapper 内部都有一张图像，并且只想在悬停时为一张图像制作动画。但是您的 $(".Img") 捕获整个页面上具有类“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 的重要部分更新您的问题。