0

この例

http://jsfiddle.net/wCb93/1/

...画像が137x109（9画像）であることを除けば、必要なもののようです。ホバーやマウスをアクティブにせずに、ランダムにフェードインおよびフェードアウトする必要があります。3 x 3のセットアップは私にとって理想的であるため、いくつかの調整が必要だと思います。私はこれまでフラッシュで作業したことがあるので、これは私にとってまったく新しいものです...だから優しくしてください！

サイトは

http://www.incyteventures.com/index.html

あなたが理想的ではないことがわかるように...どんな助けでも大歓迎です！

よろしくレ

再度、感謝します ：）

4

3 に答える 3

0

このコードを*.jsファイルとして保存します（少し変更しました）：

$(function(){
    changeImg();
})

function changeImg(){
    var randomNumber = Math.floor(Math.random()*(9));
    var theImage = $('#container > img').eq(randomNumber);

    if (theImage.css("opacity")==0){
        theImage.delay(500).animate({
            opacity:1
        },250, function(){
            changeImg();
        });
    } else {
        theImage.delay(500).animate({
            opacity:0
        },250, function(){
            changeImg();
        });
    }
}

あなたはそのように見えるはずです：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>fancy_fade_outs</title>
<style type="text/css">
img {
    display: block;
    width: 137px;
    min-height: 109px;
    margin-right: 9px;
    margin-bottom: 9px;
    opacity:0;
    border: 0;
    float: left;
}

#container {
    width: 438px; /* =(image width + margin right)*3  */
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><!-- jquery on google-->
<script src="fadeScript.js"></script><!-- path to your script-->
</head>

<body>
<div id="container">
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" />
<img src="http://dummyimage.com/50/000/000" /><div style="clear: both;"></div>
</div>
​
</body>
</html>
于 2012-08-16T12:49:18.783 に答える
0

jsfiddleをフォークし、fadeInsを追加しました。これはあなたが探しているものですか？ http://jsfiddle.net/flyingsausage/JBmks/

要素をcssに設定するため、ビルドインフェードを使用しないでください

display:none

フェードアウトアニメーションの最後に

于 2012-08-15T14:12:52.533 に答える
0

jqueryセレクター（jQuery（）または$（））を使用すると、配列のように機能するオブジェクトがあります。get（）メソッドを使用すると、そのコレクションの特定のオブジェクトを選択できます。したがって、必要なのは、セレクターを使用して画像をキャプチャし、0からオブジェクトの長さまでの乱数を選択し、fadeToggleを呼び出すことです（jQueryUIが必要です）。次に、その関数にIntervalを設定します。注：setIntervalは、fadeToggleと同じかそれ以上の時間がかかる必要があります。そうしないと、画像が完全にフェードインしません。

于 2012-08-15T13:52:51.967 に答える