Question

当鼠标悬停在那些类上时，我想让文本缓慢出现，这一切都有效，但我想把它委托给一个看似错误的函数。有什么问题？

JS：

    $(document).ready(function(){
    cambiarClasesDeProductosEnCelulares();

    $(".top-box, .middle-box, .bottom-box, .second-box, .third-box, .fourth-box").hover(aparicionDeTexto(800, 1250));
});

function aparicionDeTexto(duracionTexto, duracionOpacidad) { // ON HOVER, TEXT SHOULD COME UP SLOWLY
    $(this).find("p").css(
        "top", "20px", 
        "opacity", "0").animate({
        top: "0",
    }, {duration: duracionTexto, 
        queue: false}).animate({
        opacity: 1
    }, duracionOpacidad);
}

似乎没有响应事件hover（）。页面准备好后，会触发它...为什么？

Answer 1

文档准备就绪后，它会自动触发aparicionDeTexto(800, 1250)。由于函数aparicionDeTexto什么都不返回，因此上面的悬停代码与首先调用函数并将该函数的返回值传递给hover是一回事。

var returnedValue = aparicionDeTexto(800, 1250); // which is undefined
$("...").hover(returnedValue);

只要收到悬停事件，您想要的是aparicionDeTexto(800, 1250) 返回悬停可以调用的功能。解决此问题的一种方法是修改函数aparicionDeTexto以返回执行$(this).find("p")...的函数（即闭包）。但是，您需要注意关键字this，因为它可能不会引用您想要的this。

另一种解决方案是使用JavaScript的bind方法，而不是修改现有的aparicionDeTexto函数。

bind（）方法创建一个新函数，当被调用时，它具有它此关键字设置为提供的值，具有给定的序列调用新函数时提供的任何参数。

以下是您可以做的事情：

var box = $(".top-box, .middle-box, .bottom-box, .second-box, .third-box, .fourth-box");
box.hover(aparicionDeTexto.bind(box, 800, 1250));

这里的假设是，当您执行$(this).find("p")时，您试图找到box元素中的所有段落元素。

在悬停时将函数作为参数传递不起作用

1 个答案: