Question

我正在研究一个jquery按钮。

一旦点击“心脏btn”，它需要在屏幕上弹出总数，然后慢慢淡出。

这需要为“厚颜无耻的亲吻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>

Answer 1

虽然不确定 - 我相信这就是你要找的东西。您的号码最初将被隐藏，然后与点击按钮关联的数字将显示（弹出）并在5秒内淡出：

fiddle

$(".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);
});

Answer 2

添加

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

和

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

分别在show（）函数之后。

Answer 3

其他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。

Answer 4

这可能会更容易

$('.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();
    });
});

我添加了一些css类，以使javascript和css更好地协同工作。按钮＆amp;上的trig弹出窗口hov。

做了一个小提琴：http://jsfiddle.net/filever10/42vtX/

编辑添加了一个子句来停止/撤消动画以防止队列累积。

如何点击btn显示div - 然后让它淡出

4 个答案: