0

我正在开发一个 jquery 按钮。

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

“厚颜无耻之吻 btn”和“沟 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

虽然不确定 - 我相信这就是你要找的。您的号码最初将被隐藏，然后与单击的按钮关联的号码将显示（弹出）并在 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 回答
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();
    });
});

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

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

编辑添加了一个子句来停止/反转动画以防止队列堆积。

于 2013-11-05T17:02:29.517 回答