legendas em imagens(jQuery)

Estou tentando adicionar legendas a um slide. Mas quando clico na imagem aparece o espaço tudo certo, mas o texto fica como undefined.. alguém poderia me ajudar? Abaixo, código que eu estou utilizando.

$(document).ready(function(){
	$('.abreFecha').hide();
	$("<div id='tela'><img src='imagens/Brasil1.jpg'></div>").insertAfter('#galeria');
	$('.foto').click(function(event){
	event.preventDefault();
	$('#tela img').remove();
	$('<img>').attr('src', $(this).attr('src')).css('opacity', '0.3')
 .appendTo('#tela').animate({opacity:1}, 2000);
 });
 if (!$('#tela img').is(':animated')) {
 $('.legenda').remove();
 var legenda = $(this).children('span').attr('title')
 $('#galeria a').removeClass("corrente");
 $(this).addClass("corrente");
 $('#tela img').attr('src', $(this).text() + '.jpg')
 .css('opacity', '0.9').animate({opacity: 0.3 }, 1000,
 function() {
 $('#tela').append('<p class="legenda">' + legenda + '</p>');
 $('.legenda').css('opacity', 0.6)
 });
 }
 })