Заголовок изображения появляется до того, как изображение полностью исчезло

Question

Заголовок изображения появляется до того, как изображение полностью исчезло

0

У меня есть галерея, где я использую "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

Я полностью зациклен на том, как заставить подпись работать с изображением, как будто они оба являются одним из элементов (постепенно исчезают с каждым из них)

MikesEpitaphSays 19 окт. 2013, в 19:42

Источник

0

Создайте в памяти div, содержащий изображение и подпись, и вместо этого fadeIn div.
Aleks G 19 окт. 2013, в 17:45

Теги:

javascript

jquery

image

1 ответ

Ещё вопросы

Создайте в памяти div, содержащий изображение и подпись, и вместо этого fadeIn div.

codeninja · Accepted Answer · 2013-10-19T16-34-00.000Z

Для этого есть простой способ:

Вы можете просто использовать следующий метод, который позволит вам 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);

Святой, вау .... Такое простое исправление большое спасибо! хахах, я даже не думал об этом