Question

我正在使用这个jquery在另一个上面显示一个div，当它被盘旋时，但由于某种原因，即使它看起来有效，但fadeIN和fadeOUT也不起作用。

如果我将fadeTo分别更改为fadeIn和fadeOut，那么它会突破它，因为您悬停在上一个上面并不会消失？

$(function() {
$(".report-hover").hover(
    function() {
        $(this).children("img").fadeTo(200, 0.85).end().children(".report-image-hover").show();
    },
    function() {
        $(this).children("img").fadeTo(200, 1).end().children(".report-image-hover").hide();
    });
});

标记：

<div class="report-hover">

                <div class="report-image-hover">
                <a href="#">
                <img src="<?php bloginfo('template_url'); ?>/images/.....png" alt="Report" />
                </a>
                </div>

                <img src="<?php bloginfo('template_url'); ?>/images/.....png" alt="Report" />
</div>

Answer 1

请检查：JSfiddle

如果您只是将FadeTo替换为FadeIn，那么它将无法工作，因为FadeIn具有不同的参数。 JQuery FadeIn

Answer 2

当您选择要淡出的图像时，您需要使用.find()而不是.children()。 .children()只会选择直接后代，而您的图片仍然嵌套在div中。见 the docs ：

.children（）方法与.find（）的区别仅在于.children（）在.sind（）可以遍历时沿DOM树向下移动一个级别在多个级别选择后代元素（孙子，等）。

对于您的代码变为：

$(".report-hover").hover(
    function() {
        $(this).find("img").fadeTo(200, 0.85).end().children(".report-image-hover").show();
    },
    function() {
        $(this).find("img").fadeTo(200, 1).end().children(".report-image-hover").hide();
});

Jquery Fade无法正常工作

2 个答案: