Question

我正在使用一个名为任何滑块的插件，我试图让控件在4秒后淡出（这是有效的）然后在鼠标悬停时将不透明度改回1（不工作）。这就是我到目前为止......我做错了什么？

$(slider.$controls).mouseover(function() 
slider.$controls.fadeTo(400, 1.0);
});

$(function () {
    var fadeTime = 400,
        fadeDelay = 4000,
        timer, hideControls = function (slider) {
            clearTimeout(timer);
            setTimeout(function () {
                slider.$controls.fadeTo(fadeTime, 0.3);
                $('.tooltip').fadeOut(fadeTime);
            }, fadeDelay);
        };
});

Answer 1

您应该使用slider.$controls.fadeTo

替换每个slider.controls.fadeTo

$(slider.controls).mouseover(function() 

    $(this).fadeTo(400, 1.0);

});

Answer 2

您在第2行遇到语法错误

slider.$controls.fadeTo...

你应该

$(this).fadeTo...

因为一旦你在第1行输入了匿名函数，this对象现在引用你正在执行此代码的DOM元素，这是slider.controls所代表的元素。

Answer 3

~~首先使用slider.controls来定位控制元素，然后使用slider.$controls来定位相同的元素。我认为你需要决定它是哪一个。~~

此外，在回调函数中，您可以使用this作为对其上触发事件的元素的引用：

$(slider.controls).bind('mouseover', function () {
    $(this)...
});

~~否则，如果您想同时淡出所有控件，则只需要确定是否需要使用slider.$controls或slider.controls。~~

<强>更新

我发现你已经改变了你的问题，现在你两次都在使用slider.$controls。您应该将mouseover代码放在document.ready事件处理程序中，以便知道DOM元素可用：

$(function () {

    slider.$controls.mouseover(function() 
        slider.$controls.fadeTo(400, 1.0);
    });

    var fadeTime = 400,
        fadeDelay = 4000,
        timer, hideControls = function (slider) {
            clearTimeout(timer);
            setTimeout(function () {
                slider.$controls.fadeTo(fadeTime, 0.3);
                $('.tooltip').fadeOut(fadeTime);
            }, fadeDelay);
        };

另外我注意到你第一次将slider.$controls包装在一个jQuery对象中，但不是第二次，如果slider.$controls还不是jQuery对象，请确保这样做（很多时候开发人员放了一个$作为变量名的第一个字符，表示它是一个jQuery对象。）

Jquery淡出鼠标悬停

3 个答案: