Как оживить первый элемент, загруженный с помощью jquery?

Question

Я использую функцию загрузки для своих ссылок для загрузки html-файлов внутри div. Я также использую slideDown для анимации содержимого, но он не работает для первого загруженного html-файла. Как я могу это исправить?

http://jsfiddle.net/QNQv9/1/

$(document).ready(function() { 
    $(".iframe").on("click", function(e) { 
     e.preventDefault(); 
     $iframe.load($(this).attr('href')); 
     $iframe.slideDown(500) 
     }); 
}); 

Answer 1

В вашем jsfiddle у вас есть 'Same Origin Policy' вопрос. XMLHttpRequest не может загрузить http://jsfiddle.net/. Происхождение http://fiddle.jshell.net не разрешено Access-Control-Allow-Origin.

Вам необходимо сделать анимацию в функции обратного вызова. Попробуйте это,

$iframe.load($(this).attr('href'), function() { 
    $iframe.slideDown(500) 
}); 

Answer 2

RE проблему высоты,

что вы можете сделать, это загрузить $ IFRAME после скольжения вверх,

EDITED

var link = $(this).attr('href'); 

$iframe.slideUp(200, function() { 
    $iframe.html(''); //You don't need this line 
    $iframe.load(link, function() { 
     $iframe.slideDown(500) 
    }); 
});