0

我有一个画廊，我在其中使用“alt”作为标题，并且在调用图像时让它正确执行，显示带有标题 z-index 的图像，但由于某种原因，标题出现得太早了（我注意到了这一点，因为如果我继续点击同一张图片，除了实际的标题文本外，所有内容都会淡入淡出）。我已经提供了所有的 css 并创建了一个带有 append 的 div，实际上只显示代码可能是最简单的
这是代码：

function gallery(){
    $('#gallery a').click(function(evt){
        evt.preventDefault();
        oldImage = $('#thumbs').next();
        var imgPath = $(this).attr('href');
        var newImage = $('<img class="galleryBig" src="' + imgPath + '">');
        //get nextCaption information for each click(only applies to anchors)
        var nextCaption = $(this).find('img').attr('alt');
        newImage.hide();
        $('#thumbs').after(newImage);
        //displays caption for each image and replaces old caption (if applicable)
        $('div.caption').replaceWith('<div class="caption">' + nextCaption + '</div>');
        newImage.fadeIn();
        oldImage.remove();      
    }); //end anonymous fcn

} //end gallery

我完全不知道如何让标题与图像一起使用，就好像它们都是一个项目（淡入淡出）

4

1 回答 1

1

有一个简单的解决方法：

您可以使用以下方法来淡入（）图像，一旦淡入完成，然后加载标题。

这是代码：

$('.imageToFadeIn').fadeIn(800, function(){
  //load here the caption
})

上面的代码将做的是，一旦 fadeIn() 函数完成，它将执行下一个函数，您可以在其中加载字幕。

阅读文档以更好地了解持续时间后的功能。

http://api.jquery.com/fadeIn/

如果您想同时加载两者，则将两个元素、图片和标题放入一个 div 中，然后使用 fadeIn() 将 div 改为如下所示：

html:

<div class="pictureAndCaption">
  <img src="source">
  <span>Caption text</span>
</div>

jQuery：

 $('.pictureAndCaption').fadeIn(800);
于 2013-10-19T18:04:16.630 回答