0

私はjqueryボタンに取り組んでいます。

「ハートボタン」をクリックすると、合計数が画面にポップアップ表示され、ゆっくりとフェードアウトする必要があります。

これは、「cheeky kiss btn」と「ditch btn」の両方で行う必要があります。

ホバー状態を作成しましたが、クリックしたときにポップアップ効果が現れるときにフェードアウト効果を作成する方法がわかりません

数字がポップアップしたら、5 秒後にフェードアウトする必要があります

どんな助けでも素晴らしいでしょう、ここに私のフィドルがあります。http://jsfiddle.net/2hVVU/3/

<div id="content">
    <div id="profile-pic">
        <ul>
            <div id="love-btns">
                <ul>
                    <li><a href="#" class="cheeky-kiss-btn"></a></li>
                    <li><a href="#" class="ditch-btn"></a></li>
                </ul>
                <div id="cheeky-kiss-btn-hover">Cheeky Kiss :)<span></span></div>
                <div id="ditch-btn-hover">Ditch :(<span></span></div>
                <div class="number-total cheeky kiss">+ 70,101</div>
                <div class="number-total ditch">+ 30,101</div>
            </div>
        </ul>
    </div>
</div>
4

4 に答える 4

1

これは簡単かもしれません

$('.trig').each(function(i){
    $(this).hover(function() {//hover
        $('.hov').eq(i).show();
    }, function(){
        $('.hov').eq(i).hide();
    }).click(function() {//click
        $('.number-total:visible').stop().fadeOut();//stop queue buildup
        $('.number-total').eq(i).stop(false,true).fadeIn().delay(5000).fadeOut();
    });
});

javascript と css の連携を向上させるために、いくつかの css クラスを追加しました。trigボタンとhovポップアップで。

フィドルを作った：http://jsfiddle.net/filever10/42vtX/

editは、キューの蓄積を防ぐためにアニメーションを停止/反転する句を追加しました。

于 2013-11-05T17:02:29.517 に答える
1

確かではありませんが、これがあなたが探しているものだと思います。番号は最初は非表示で、クリックされたボタンに関連付けられた番号が表示 (ポップアップ) され、5 秒間でフェードします。

フィドル

$(".number-total").hide();

/*  CHEEKY KISS POP UP
===================================================================*/

$("a.cheeky-kiss-btn").hover(function(){
    $("#cheeky-kiss-btn-hover").show();
}, function(){
    $("#cheeky-kiss-btn-hover").hide();
}).click(function() {
    $(".cheeky").show().fadeOut(5000);
});

/*  DITCH POP UP
===================================================================*/

$("a.ditch-btn").hover(function(){
    $("#ditch-btn-hover").show();
}, function(){
    $("#ditch-btn-hover").hide();
}).click(function() {
    $(".ditch").show().fadeOut(5000);
});
于 2013-11-05T16:37:00.123 に答える
1

追加するだけ

$("#cheeky-kiss-btn-hover").fadeOut(5000);

と

$("#ditch-btn-hover").fadeOut(5000);

それぞれ show() 関数の後。

于 2013-11-05T16:38:22.393 に答える
1

追加の CSS:

.number-total {
    display: none;
}

追加の JS:

$("a.cheeky-kiss-btn").on("click", function () {
    $(".number-total.cheeky.kiss").show();
    setTimeout(function() {
        $(".number-total.cheeky.kiss").fadeOut('slow');
    }, 5000);
});

$("a.ditch-btn").on("click", function () {
    $(".number-total.ditch").show();
    setTimeout(function() {
        $(".number-total.ditch").fadeOut('slow');
    }, 5000);
});

フィドル: http://jsfiddle.net/hm6gF/

これは5 秒後にのみフェードアウトを開始することに注意してください。すぐにフェードアウトを開始し、 5 秒以上かけてフェードアウトしたい場合は、setTimeout を削除して、代わりに に変更します。'slow'5000

于 2013-11-05T16:42:42.090 に答える