2013-04-24 62 views
0

我希望你們中的一個人可能會指出我在正確的方向關於我有一個問題,我有一個jquery auto_refresh函數 - 代碼如下 - >嚴,刷新和一切,但悲傷地它看起來醜陋。 O.o當刷新發生時,它閃爍不成比例。顯然,必須有這樣做的更加平滑的方式...問題與jquery自動刷新功能


<script> 
var auto_refresh = setInterval(
function() 
{ 
$('#basic').load('resources_basic.php'); 
}, 1000); 


$(function() { 
$("#draggable_res").draggable(); 
}); 
</script> 

<div id="draggable_res" class="ui-widget-content"> 
<h5> Resources </h5> 
    <div id="Accordion1" class="Accordion" tabindex="0"> 
    <div class="AccordionPanel"> 
     <div class="AccordionPanelTab">Basic Resources</div> 
     <div class="AccordionPanelContent"> 
     <div id="basic"><?php include 'resources_basic.php'; ?></div> 
     </div> 
    </div> 

<table width="160" border="2" cellspacing="2" cellpadding="2"> 
      <tr> 
      <td width="30"><img src="images/product/gold.gif" width="30" height="30" alt="Gold" /></td> 
      <td width="110"><?php echo $row_resourcesbasic_rs['gold']; ?></td> 
      </tr> 
      <tr> 
      <td width="30"><img src="images/product/wood.gif" width="30" height="30" alt="Wood" /></td> 
      <td width="110"><?php echo $row_resourcesbasic_rs['wood']; ?></td> 
      </tr> 
      <tr> 
      <td width="30"><img src="images/product/clay.gif" width="30" height="30" alt="Clay" /></td> 
      <td width="110"><?php echo $row_resourcesbasic_rs['clay']; ?></td> 
      </tr> 
      <tr> 
      <td width="30"><img src="images/product/stone.gif" width="30" height="30" alt="Stone" /></td> 
      <td width="110"><?php echo $row_resourcesbasic_rs['stone']; ?></td> 
      </tr> 
     </table> 

感謝提前:)

回答

0

有些褪色? 這會讓你刷新平滑

$('#basic').fadeOut('fast'); 

$('#basic').load('resources_basic.php',function(){ 
    $('#basic').fadeIn('fast'); 
}); 
+0

試過了。 :)仍然醜陋:( – 2013-04-24 17:57:19

+0

醜陋..?它看起來像什麼樣子?? – 2013-04-24 17:58:00

+0

Nevermind !!!我試過了:不完全像你的... var auto_refresh = setInterval( function() { $('#基本')。load('resources_basic.php')。fadeIn(「slow」); },1000); – 2013-04-24 18:10:03

0

顯然,你需要爲你要去的地方添加動態數據的容器設置的初始大小。否則,它會在每次加載和閃爍時調整大小。 初始大小可以通過CSS進行最佳設置,例如,

#basic { 
width: 100px; 
height:100px; 
background-color: #cccccc; 
} 
+0

嘗試過,它仍然調整大小...即使初始大小設置爲 – 2013-04-24 18:28:35

0

你可以連一些平滑的過渡淡入淡出功能:

var auto_refresh = setInterval(function(){ 
    $('#basic').fadeOut(500).load('resources_basic.php').fadeIn('fast'); 
}, 1000); 
+0

試過...我是尋找更不起眼的東西。 – 2013-04-24 18:29:31