0

私はカードを引くプログラムに取り組んでいます。私は 54 枚のカードを持っており、それらを個別にドローしたいと考えています。これが私がこれまでに得たものです。配列を読み取り、シャッフルし、リセットしてから、foreach.

<?
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が初めてで、カードを表示し、クリックするたびに画像を変更するアニメーションを作成するのに助けが必要です。

このアニメーションを作成するにはどうすればよいですか? これを行うには、コードを完全に変更する必要がありますか? もっと簡単な方法はありますか？

前もって感謝します！

4

2 に答える 2

1

個々の div ごとに opacity 0 を設定し、class="card" を指定します

次に、この関数を使用します

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

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

$(".card") は、クラス ".card" を持つすべての要素を取得するための jQuery セレクターです。上記は、どこからともなく出現する各カードを示しています。これはクールな効果です。これは単なる例です。jQuery animate() を使用すると、さらに多くのことができます。http://api.jquery.com/animate/ をご覧ください 。たとえば、次のように速度を設定できます。

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

または、表示中にエンティティが少し上がるメトロのようなアニメーションを表示して、div に margin-top:10px と opacity:0 を追加し、この関数を使用することもできます。

$(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-06T04:24:33.340 に答える
1

方法はいろいろありますが、最初に思いついたのは以下の方法です。

$(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")あります。次を表示します。

ループを続けるように上記をコーディングしましたが、必要に応じて独自のエンドオブデッキ アクションを追加できます。

デモ: http://jsfiddle.net/FrrhZ/

jQuery には多数のアニメーション メソッドが用意されており、アニメーションを好きなだけ複雑にすることができますが、デモの目的で と を使用.slideUp()し.slideDown()ました。

ちなみに、<br>個々の div の間から要素を削除します。一度に 1 枚のカードしか表示されない場合は必要ありませんが、複数のカードを表示する場合でも、div はブロック要素であり、デフォルトで 1 つ下に表示されます。さらにスペースが必要な場合は、スペーサーを追加するのではなく、CSS でマージンを設定してください。要素。

于 2012-07-06T04:33:36.503 に答える