0

ここではまれな状況で、いくつかのアイデアが必要です。多くの組み合わせを証明するだけですが、プログラミングはランダムではありません。

ボーダー=1pxのテーブルがあります。また、私は<td>それらの中にたくさんの、そして1つの画像を持っています。基本的に私の考えは、ユーザーが1つの画像（img）をクリックすると、クリックされた画像を除いて、すべての画像とテーブルの境界線が「フェードアウト」するというものです。だから私はたくさんの組み合わせを証明しました、そしてimgが消えるとき、境界線がないか、何も消えないか、すべてが消えるか、コールバックが機能しません。これまでの私の最善のアプローチはこれです：

次のhtmlを想定します。

<table id="entire">
<tr><td>
<table class="table1" border="1px">
<tr>
<td><img id="ebox"></td>
<td><img id="fbox"></td>
<td><img id="gbox"></td>
</tr>
</table>
</td></tr>
</table>

そして、次のJQueryを想定します。

    $("#entire").click(function (event) {

        $('.table1 img').animate({
            opacity: 0.3
            }, 500,
            function() {


        }); //close the animate

$('#' + event.target.id).animate({
            opacity: 0.9
            }, 500,
            function() {


        }); //close the animate

    });  //close the event click

ParentNodeを使用して、を呼び出し、すべてをフェードアウトしてからフェードオンするなどの他のオプションを使用して、すべてを実際に証明します。

最後に、これができることは知っていますが、方法がわかりません。私の考えでは、table1は、クリックされた画像を除いて「フェードアウト」し、後ではなく、同時にフェードアウトします。

回避策も解決策として扱われます。反対票を投じる前に、コメントするか、詳細情報を求めるか、提案してください。私は実際にGoogleで検索し、「キューオフ、完了：」も試してみましたが、機能しません。

アップデート：

最後のアプローチ：

$('.table1 img').not(event.target).animate({alpha: 0.3}, {
        duration: 1000,
    step: function() {
            $('.table1').css('border-color','rgba(0,0,0,'+this.alpha+')');
        }

});
4

1 に答える 1

2

jQuery UIではカラーアニメーションが可能であるため、jQuery UI（またはその適切な部分）をインストールして、次のことを試してください。

var $t = $("#entire table").on('click', 'img', function() {
    $(this).fadeIn(250);
    $t.animate('border-color', '#FFF').find('img').not(this).fadeOut(1000);
});

他のコードが元の色にリセットしない限り、境界線のフェード効果は1回だけ表示されます。

編集

.fadeTo()fadeIn()おそらく/よりも優れていfadeOut()ます; 色あせた画像はクリックできるままです。

var $t = $("#entire table").on('click', 'img', function() {
    $(this).fadeTo(250, 1.0);
    $t.animate('border-color', '#FFF').find('img').not(this).fadeTo(1000, 0.2);
});
于 2012-09-11T22:32:47.910 に答える