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

How to convert this JS to jQuery? Need to add fade effect

本文关键字：添加 淡入 淡出 jQuery JS 转换      更新时间：2023-09-26

我有一个简单的JavaScript，可以在img悬停时显示一个隐藏的div：

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效果，而不仅仅是可见/隐藏效果。此外，CCD_ 5中的延迟将是很大的。我知道一些jQuery，但这是旧的JS，我如何添加渐变效果？

非常感谢

编辑：我设法使希登迪夫发丹，但它不会永远发丹。如果我将鼠标快速移动到另一个隐藏的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; });

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

使用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.

$(dTarg).fadeIn("1000")

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

您还必须从更改dTarg项目的css

visibility:hidden

至

display:none
相关文章：