jQuery UI效果导致iframe重新加载

我正在使用jQuery显示/隐藏碰巧包含iframe的div。 它只适用于标准的“show”和“hide”方法。

所以现在我想得到一些幻想，并从jQuery UI（ http://jqueryui.com/effect/ ）添加一些效果，但突然我的iframe每次显示/隐藏时都会重新加载。

这是一个小提琴演示： 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('' + msg + ''); } 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('------------------------
' + '-- Begin Effects --
' + '------------------------
'); 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 }); </ 

知道我怎么能保持花哨的效果，但不刷新我的iframe的内容？

Answer 1

它正在发生，因为这个效果重新组织了DOM，在IFRAME周围放置了一个DIV包装器，所以当IFRAME“重新连接”时，重新加载就会发生！ 您可以使用Google Chrome元素检查器查看此行为。

要解决我建议您从IFRAME中的父DIV中应用效果，但不使用effect插件。 查看http://api.jquery.com/animate/ ，操作宽度和高度样式属性。

Answer 2

作为@Jamillo Santos的回答，’重新’关于iFrame的问题。

如果您正在使用对话框小部件或其 jQueryUI的扩展 ，并希望防止这种情况，只需重新定义您的小部件实现的_moveToTop（）函数，如下所示。

 _moveToTop: function() { return null; },