PHP和jQuery繪製數字動畫

我一直在研究一個繪製卡片的程序。我有54張牌，我想分別繪製它們。這是我迄今得到的。它讀取一個數組，將其整理並重置，然後將它們放入一個foreach。PHP和jQuery繪製數字動畫

<? 
session_start(); 
include "array.php"; 
shuffle($cards); 
reset($cards); 
$i = 1; 
foreach($cards as $card){ 
print <<<HERE 
    <div id="$i">\n<img src="img/{$card[1]}.gif" alt="{$card[0]}" width="176" height="276"/><br/> 
    <h1 style="font-family: sans-serif;">{$card[0]}</h1>\n</div><br />\n\n 
HERE; 
    $i++; 
} 

?>

每個卡的每個結果出來，因爲這：

<div id="1"> 
<img src="img/#.gif" alt="Card Name #" width="176" height="276"/><br/> 
<h1 style="font-family: sans-serif;">Card Name #</h1> 
</div><br />

在array.php，有一個2維陣列保持各卡的路徑和名稱。例如：

$array = array(); 
$array[] = array("Card Name 1", "1"); 
$array[] = array("Card Name 2", "2"); 
$array[] ...

不管怎麼說，我在jQuery的新的，我需要幫助到創建動畫，顯示卡並更改爲它所輸出，直到它運行的順序每次點擊的圖片。

如何創建此動畫？我是否需要徹底更改我的代碼才能完成此操作？有更簡單的方法嗎？

在此先感謝！

來源

2012-07-06 zeldarulez

有很多方法可以做到這一點，但這裏的第一個浮現在腦海：

$(document).ready(function(){ 
    var i=0, 
     $cards = $("div").hide(); 
    $cards.click(function(){ 
     $cards.eq(i).slideUp(function() { 
      i = (i+1)%$cards.length; 
      $cards.eq(i).slideDown(); 
     }); 
    }).eq(0).slideDown(); 
});

您應該分配您的卡的div一個共同的階級，改變jQuery選擇使用它，例如，$("div.card") ，但總體思路是選擇所有的卡div並隱藏它們，顯示第一個，然後點擊顯示的任何一個隱藏它並顯示下一個。

我已經編碼了上面的代碼以保持循環，但是您可以根據需要添加自己的結束行爲。

演示：http://jsfiddle.net/FrrhZ/

jQuery提供了一些animation methods，並且可以使動畫的，只要你喜歡複雜，但對於演示目的，我只是.slideUp()和.slideDown()去了。

順便說一句，我會刪除您的各個divs之間的<br>元素。如果一次只顯示一張卡片，則不需要它們，但即使顯示多張卡片，div也是塊元素，默認情況下會顯示其中一個 - 如果需要更多間距，則通過CSS設置邊距而不是添加間隔符元素。

來源

2012-07-06 04:33:36 nnnnnn

優秀的答案！正是我所需要的;） – zeldarulez 2012-07-06 15:07:10

也，當我運行這個代碼，它的工作原理，但每次我點擊時，下一張卡片下降到APPX。 20像素。我如何防止這種情況？ – zeldarulez 2012-07-06 15:28:41

您需要刪除每個div後輸出的br標籤（注意我已經爲我的演示執行了此操作：將演示中的html與您的php輸出進行比較）。 – nnnnnn 2012-07-06 21:33:32

對於您的每一個單獨的div一套不透明0和給類= 「一卡通」

然後使用此功能

$(document).ready(function() 
{ 
    $(".card").animate({opacity:"1"}); 
});

例：http://jsfiddle.net/FrrhZ/10/

的$（「一卡通」）是一個jQuery選擇器來獲取所有具有類「.card」的元素。上面會顯示每張卡從無處出現，一個很酷的效果。這只是一個例子，你可以做更多的事情jQuery的動畫（），看看例如，你可以設置速度這樣

$(".card").animate({opacity:"1"}, 1000);//animation to be completed in 1000 miliseconds.

，或可以顯示像動畫，其中一個地鐵實體去一點點了，而出現的，要做到這一點添加邊距：10px的和不透明度：0您的div然後使用這個功能

$(document).ready(function anim() 
    { 
     $(".card").animate({opacity:"1", marginTop:"0px"}, 'slow');//animate also excepts some keywords for speed like 'slow', 'fast' 
    });

例：http://jsfiddle.net/FrrhZ/14/

你可以得到甚至莫使用animate（）創意，這些僅僅是jQuery animate（）中可能的很多事情中的一小部分，甚至可以鏈接動畫，所有內容都在鏈接中提供。繼續探索。

來源

2012-07-06 04:24:33

您的回答也很好。但是我一次只需要一張卡片就可以出現。 +1 – zeldarulez 2012-07-06 15:06:57

PHP和jQuery繪製數字動畫

回答

相關問題