Question

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

这个叠加html是从dom模板中获取的。

当鼠标悬停时，我想在setTimeout()之后使用fadeOut()保存当前元素的叠加层html。

我之所以这样做，是因为我希望保持特定效果，即叠加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);
});

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

1 个答案: