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

$(dTarg).fadeIn("1000")

这会在1秒内消失。

您还必须从

更改dTarg项目的CSS

visibility:hidden

到

display:none

Answer 3

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

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

3 个答案: