jquery - jquery hoverOut不使用setTimeout（）保存html？

Question

我正在尝试保存一段 html 代码，该代码在悬停时应用于元素。

这个覆盖 html 是从 dom 模板中获取的。

悬停时，我想使用setTimeout()after a保存当前元素的覆盖 html fadeOut()。

我这样做是因为我想保持一个特定的效果，其中覆盖 html 立即消失（html('')），但覆盖包装器需要fadeOut()。

出于某种原因，setTimeout()悬停时不会保存 html。

我的悬停事件（请参阅悬停回调）：

$('.isotope-item').hover(
function()
{
    var id = $(this).attr('data-id');
    var img = $(this).attr('data-img');

    var htmlIsoHover = htmlIsoHoverTemplate.replace('{id}', id);
    htmlIsoHover = htmlIsoHover.replace('{image}', img);


    var thisHtmlIsoHover = $(this).find('.hover-overlay').html();

    if (thisHtmlIsoHover.length > 0)
    {
        htmlIsoHover = thisHtmlIsoHover;
    }

    $(this).find('.hover-overlay').html(htmlIsoHover).stop(1, 1).fadeIn('fast');

},
function()
{
    var htmlIsoHover = $(this).find('.hover-overlay').html();
    $(this).find('.hover-overlay').html('').fadeOut(500);


    // this won't save

    setTimeout(function()
    {
        $(this).find('.hover-overlay').html(htmlIsoHover);
    }, 500);
});

Answer 1

那是因为this，在您传递给的回调中setTimeout，不是您的元素，而是window.

你可以像这样修复它：

function()
{
    var $this = $(this);
    var htmlIsoHover = $this.find('.hover-overlay').html();
    $this.find('.hover-overlay').html('').fadeOut(500);

    setTimeout(function()
    {
        $this.find('.hover-overlay').html(htmlIsoHover);
    }, 500);
});