Эффект пользовательского интерфейса jQuery вызывает перезагрузку iframe
Я использую jQuery, чтобы показать / скрыть div, который содержит iframe. Отлично работает только со стандартнымшоу' а также 'скрывать' методы.
Так что теперь я хочу немного придумать и добавить некоторые эффекты из jQuery UI (http://jqueryui.com/effect/) но вдруг мои фреймы перезагружаются каждый раз, когда я их показываю / скрываю.
Вот скрипка для демонстрации:http://jsfiddle.net/BnZzk/1/ А вот код, так как SO заставляет меня добавить его:
div {
height: 200px
}
span {
display: block;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid black;
}
$(function () {
var container = $('div'),
ifrm = $('iframe'),
msgs = $('#msgs')
delay = 10; //change me to adjust delay in seconds between actions
$('input').on('click', normal);
log('First let the iframe load and then clear your network console -- click the "Go" button to get started.');
function log (msg) {
msgs.append('<span>' + msg + '</span>');
}
function normal () {
ifrm.
hide(400, function () {
log('That was a standard hide with no effect -- is your network console still empty? OK we\'ll pause for ' + delay + ' seconds and then do a standard show.');
ifrm.
delay(delay * 1000).
show(400, function () {
log('That was a show with no effect -- is you network console *still* empty? Great! Let\'s try some effects.');
log('------------------------<br>' +
'-- Begin Effects --<br>' +
'------------------------<br>');
withEffect();
});
}); //hide
} //normal
function withEffect () {
log('We\'ll pause for another ' + delay + ' seconds -- get ready to watch your network console.');
ifrm.
delay(delay * 1000).
hide('fold', {mode:'hide'}, 400, function () {
log('That was a hide with effect -- is your network console flooded? Mine too :-( We\'ll wait ' + delay + ' seconds while you clear your console again.');
ifrm.
delay(delay * 1000).
show('fold', {mode:'show'}, 400, function () {
log('That was a show with effect -- is your network console flooded again? Bummer ...');
});
}); //hide
} //withEffect
});