Question

我有一个画廊，我使用'alt'作为标题，我让它在调用图像时正确执行，显示上面带有标题z-index'd的图像但由于某种原因标题出现了太早了（我注意到这一点，因为如果我一直点击相同的图像，除了实际的标题文本外，一切都会消失）。我已经提供了所有的css并创建了一个带附加的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

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

Answer 1

有一个简单的解决方法：

你可以使用以下方法，它允许你fadeIn（）图像，一旦fadeIn完成，然后加载标题。

以下是代码：

$('.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);

在图像完全淡入之前进入的图像标题

1 个答案: