jquery - 如何淡入jQuery中已经可见的对象？

Question

我正在尝试使用 jQuery 制作照片库，因此当我单击缩略图时，它会通过淡入变成“缩放框”。然后我使用左右箭头导航，函数 loadContentFrom(domObject) 看起来像这样：

function loadContentFrom(domObject)
{
    // metaspan is gonna be the content of #zoombox :
    var metaspan = domObject.children('.metaspan');

    // set the html by fading in :
    $("#zoombox").html(metaspan.html()).fadeIn(400);
    add_left_right_arrows_to_zoombox();

    // also set the background to be clickable for exit.
    $("#exitdiv").fadeIn(400); 
}

它工作正常，当我单击 domObject 时它会淡入。但是当我单击左右箭头时，它会调用，loadContentFrom(selectedDomObject.next('.domobject'));但由于缩放框已经淡入，它会立即更改内容。

那么如何设置它先淡出当前内容，然后淡入新内容呢？

谢谢 ！

Answer 1

像这样..

function loadContentFrom(domObject)
{
    // metaspan is gonna be the content of #zoombox :
    var metaspan = domObject.children('.metaspan');

    // set the html by fading in :
    $("#zoombox").html(metaspan.html()).fadeIn(400);
    add_left_right_arrows_to_zoombox();

    // also set the background to be clickable for exit.
    $("#exitdiv").hide().fadeIn(400); 
}

Answer 2

FadeIn将无法使用visible objects，但您可以在fadein( )之前使用hide( )

喜欢，

像这样..

function loadContentFrom(domObject)
{
    // metaspan is gonna be the content of #zoombox :
    var metaspan = domObject.children('.metaspan');

    // set the html by fading in :
    $("#zoombox").html(metaspan.html()).hide().fadeIn(400);// use hide then fadein
    add_left_right_arrows_to_zoombox();

    // also set the background to be clickable for exit.
    $("#exitdiv").hide().fadeIn(400); // use hide then fadein
}