jQuery:淡入/淡出+设置动画元素 [英] jQuery: fade in/out + animate elements

问题描述

我正在使用jQuery淡入/淡出某些元素并更改其他元素的不透明度.

I'm using jQuery to fade in/out some elements and change the opacity of the others.

  $(function(){

        $('.image').each(function() {
            $(this).hover(
                function() {
                    $(this).stop().animate({ opacity: 0.3 }, 'slow');
                    $(this).siblings().fadeIn('slow');
                },

               function() {
                   $(this).stop().animate({ opacity: 1 }, 'slow');
                   $(this).siblings().fadeOut('slow');
               })
            });
        });

您可以在 http://projects.klavina.com/stackoverflow/01/上查看完整的代码. (我还在页面上使用jQuery Masonry插件).

You can see the full code at http://projects.klavina.com/stackoverflow/01/ (I'm also using the jQuery Masonry plugin on the page).

我对JS/jQuery还是很陌生，并且上面的代码无法正常工作，除非我真正缓慢地删除.image元素.当我更快地在元素上移动时，即使我已经在另一个元素上移动，图像上的标题也会显示出来.我该如何删除? IE.仅当我仍将鼠标悬停在该特定元素上时，标题才应淡入.

I'm fairly new to JS/jQuery and the above code doesn't work well, unless I mousover the .image element really slowly. When I move over the elements faster, the captions over the images show even when I've already moved over another element. How can I remove that? I.e. the captions should fade in only when I'm still hovering that particular element.

示例网站上的第一张图片的"z-index:100;"的标题，所以我可以完全不透明的情况下覆盖文本.理想情况下，我将拥有"z-index:100"；对于所有字幕，但这会使悬停工作变得更糟.

The first image on the example site has a "z-index: 100;" for the caption, so I can get the text overlay at full opacity. Ideally, I would have "z-index: 100;" for all the captions, but this makes the hovering work even worse.

此外，在IE中，淡入/淡出看起来是失真的.我该如何解决?我确实在另一页上使用了不透明度更改，并通过在元素上添加白色背景来修复了IE错误，但是在这里我不能这样做(因为下面有照片).

Plus, the fading in/out looks distorted in IE. How can I fix that? I did use the opacity change on another page, and fixed the IE bug by adding a white background to the element, but I can't do that here (as I have a photo underneath).

谢谢！

推荐答案

问题的根本原因是，您需要调用.siblings().stop()，另外还调用 到$(this).stop()(其中你已经拥有了).

The core cause of your issue is that you need a call to .siblings().stop(), in addition to the $(this).stop() (which you already have).

修复此问题后，您会看到一个新的问题，该字幕最初可以正常工作，但是一旦被反复鼠标悬停，它们便开始仅部分消失(最终，它们将完全消失，直到您重新加载页面).这是由于.fadeIn()与.fadeOut()结合时的工作方式--fadeIn()并不总是淡入opacity:1-而是淡入到之前曾被呼叫.

After you fix that, you'll see a new issue, where your captions initially work correctly, but then begin to fade in only partially once they've been moused-over repeatedly (and eventually, they'll disappear completely until you reload the page). This is due to the way .fadeIn() works when combined with .fadeOut() -- fadeIn() doesn't always fade-in to opacity:1 -- instead, it fades-in to whatever opacity was applied at the time fadeOut() was called previously.

要解决此问题，可以使用animate({opacity:1},'slow')而不是fadeIn('slow')，或者可以使用更简洁(更清晰)的.fadeTo('slow',1)(

To get around this, you can use animate({opacity:1},'slow') instead of fadeIn('slow') -- or you can use the more concise (and clearer) .fadeTo('slow',1) (docs). (note, the parameter order is different on fadeTo, as compared to the other animation functions - the duration comes first, then the value you want to fade to).

当然，您也可以使用fadeTo()代替其他不透明度动画-尽管您使用的animate()当然没有错-两者是等效的. (当然，如果要同时操作多个css属性，则需要设置animate().)

Of course, you could also use fadeTo() in place of your other opacity animation --though there is certainly nothing wrong with using animate() as you've shown -- the two are equivalent. (of course, you would need to se animate() if you want to manipulate multiple css properties at the same time.)

当所有内容组合在一起时，可能看起来像这样:

When it all comes together, it might look something like this:

$(function() {
    $('.image').each(function() {
        $(this).hover( function() {
            $(this).stop().fadeTo('slow',0.3)
                .siblings().stop().fadeTo('slow',1);
        }, function() {
            $(this).stop().fadeTo('slow',1)
                .siblings().stop().fadeTo('slow',0);
        });
    });
});

您可以在jsFiddle上看到以下代码: http://jsfiddle.net/coltrane/XstpE/
(请注意:该示例取决于上面原始帖子附带的托管资源，因此，如果这些资源被移动或以其他方式不可用，它将无法正常工作.)

You can see this code in action at jsFiddle: http://jsfiddle.net/coltrane/XstpE/
(note: that example depends on the hosted resources that go with the original post above, so it won't work if those get moved or become otherwise unavailable).

另外请注意:在上面的示例中，与您在原始示例中所做的一样，我已经包括了.each()的用法，但是我想指出的是，这实际上不是必需的.

Also note: In the example above, I have included the use of .each() as you did in your original example, but I want to point out that it's really not necessary.

以下是等效的(通常被认为是更好的" jQuery技术):

The following is equivalent (and would usually be considered "better" jQuery technique):

$(function() {
    $('.image').hover(function() {
        $(this).stop().fadeTo('slow', 0.3)
            .siblings().stop().fadeTo('slow', 1);
    }, function() {
        $(this).stop().fadeTo('slow', 1)
            .siblings().stop().fadeTo('slow', 0);
    });
});

当您将事件处理程序应用于多元素集时，jQuery会自动将相同的处理程序绑定到集合中的每个元素上. (我已经更新了jsFiddle中的示例(上面已链接)，以显示代码而没有 each()).

When you apply an event handler to a multi-element set, jQuery automatically binds the same handler on every element in the set. (I've updated my example at jsFiddle (linked above) to show the code without the each()).

修改

OP指出，将鼠标悬停在标题(位于图像上方)上方会触发mouseleave处理程序，从而导致执行滚动操作.所需的行为是使标题 not 不会触发首次展示.

The OP points out that hovering over the caption (which sits on top of the image) causes the mouseleave handler to trigger, thus resulting in the roll-out action being performed. The desired behavior is to have the caption not trigger the rollout.

之所以会发生此问题，是因为标题使图像蒙上阴影"，并且hover()应用于图像.当鼠标滑过标题时，它不再位于图像上(位于标题上)，因此浏览器在图像上触发鼠标离开.同样的情况也会引起各种各样的其他细微问题，尤其是当您添加更复杂的内容时.

This issue happens because the caption "shadows" the image, and the hover() is applied to the image. When the mouse rolls over the caption it's no longer on the image (it's on the caption) so the browser fires a mouseleave on the image. This same situation can give rise to all sorts of other subtle problems too -- especially as you add more complex content.

为解决此问题，我建议您仅将hover()向上一级应用(应用于保存图像和标题的容器)，而不是直接将其应用于图像.在这种情况下，容器为$('.entry').代码将像这样更改:

To solve this, I recommend that you simply apply hover() one level up (to the container that holds the image and the caption), instead of applying it to the image directly. In this case that container is $('.entry'). The code would change like this:

$(function() {
    $('.entry').hover(function() {
        $('.image',this).stop().fadeTo('slow', 0.3)
            .siblings().stop().fadeTo('slow', 1);
    }, function() {
        $('.image',this).stop().fadeTo('slow', 1)
            .siblings().stop().fadeTo('slow', 0);
    });
});

这是jsFiddle的新版本

这篇关于jQuery:淡入/淡出+设置动画元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！