如何将此 JS 转换为 jQuery？需要添加淡入淡出效果

Question

我有这个简单的 JavaScript 可以让隐藏的 div 出现在 img 上悬停：

document.onmouseover = quickView;

function quickView(e) {
    (!e) var e = window.event;
    var target = e.target || e.srcElement;
    var bWide = window.innerWidth || document.documentElement.clientWidth;

    if(target.className == 'p-image') {
        var dTarg = target.parentNode.lastChild;
        dTarg.style.visibility = 'visible';
        dTarg.style.top = (target.parentNode.offsetTop - 110) + 'px';
        if (target.parentNode.offsetLeft < (bWide * .5)) {
            dTarg.style.left = (target.parentNode.offsetLeft + 185) + 'px';     
        }

        if (target.parentNode.offsetLeft >= (bWide * .1801)) {
            dTarg.style.left = (target.parentNode.offsetLeft - 497) + 'px'; 
        }

        target.onmouseout = hideQuickView;
    }
}

function hideQuickView(e) {
    if (!e) var e = window.event;
    var target = e.target || e.srcElement;
    target.parentNode.lastChild.style.visibility = 'hidden';
}

我需要添加fadein 和fadeout 效果，而不仅仅是可见/隐藏。 fadein 的延迟也会很棒。我知道一些 jQuery，但这是旧 JS，如何添加淡入淡出效果？

非常感谢

编辑： 我设法淡入hiddendiv，但它不会总是淡入淡出。如果我将鼠标快速移动到另一个隐藏的 div，效果将不再起作用。我需要等待一段时间才能让淡入淡出再次起作用。我的意思是代码不是一个准确的解决方案。 正如我所说，悬停类称为p-image，隐藏类称为quickview。 这是 jQuery，但如果我能以某种方式编辑原始 JavaScript 以在其中包含延迟淡入淡出，我会更喜欢。

$(document).ready(function(){ $(".p-image").hover(function () { jQuery(".quickview").css("opacity", .20); jQuery(".quickview").fadeTo(430, 1); }); return true; });

Answer 1

将 jQuery 添加到您的站点并使用 $(selector).fadeIn(); 和 $(selector).fadeOut();
选择器可以是任何 CSS 选择器，例如$('#element_id').fadeIn()
用 jquery 位替换隐藏/显示元素的代码位。你可以把剩下的留在普通的js中。
要更改淡入淡出的持续时间，请在函数中添加一个参数，例如$(element).fadeIn(400); 将使淡入淡出持续 400 毫秒
more information here

Answer 2

您使用 jQuery 的 fadeIn 函数淡入元素并使用 fadeOut 淡出它们。然后使用 delay 和 fadeIn 如果你想要延迟，$( "selector" ).delay( 500 ).fadeIn()

$( document ).on( "mouseover", function( e ) {
    e = e || window.event;
    var $target = $( e.target || e.srcElement );
    var bWide = $( window ).width();
    if ( $target.hasClass( "p-image" ) )
    {
        var $dTarg = $target.parent().children().last();
        var targOffset = $target.parent().offset();
        $dTarg.fadeIn().css( "top", targOffset.top - 110 + "px" );
        if ( targOffset.left < ( bWide * .5 ) )
        {
            $dTarg.css( "left", $targOffset.left + 185 + 'px' );
        }
        else if ( targOffset.left >=  ( bWide * .1801 ) )
        {
            $dTarg.css( "left", $targOffset.left - 497 + 'px' );
        }
        $target.on( "mouseout", hideQuickView );
    }
});

// You should be able to figure out hideQuickView implementation.

Answer 3

$(dTarg).fadeIn("1000")

这会在 1 秒内淡入这些内容。

您还必须从

更改 dTarg 项的 css

visibility:hidden 

到

display:none