从当前位置向上滑动以获取jQuery效果

Question

我正在制作购物车“宝石”（就像那些iOS应用图标通知一样），当购物车的数量增加时，它会向上滑动;当购物车的数量减少时，它会向下滑动。这是代码：

JS：

$('#jewel').text('');
$.getJSON("{{ url('schedulizer/cart') }}", function(data) {

    if(data.quantity > 0) {
        $('#jewel')
                .show("slide", { direction: "up" }, 100)
                .text(data.quantity);
    } else {
        $('#jewel')
                .hide("slide", { direction: "down" }, 100)
                .text(data.quantity);
    }
});

HTML：

<button
    id="fixed-button"
    class="btn btn-fab btn-raised btn-material-yellow-600 mdi-action-list">
    <span id="jewel" class="jewel"></span>
</button>

我遇到的问题是，上滑效果不是我想要的。在这种情况下，图标从TOP滑动到宝石位置，而不是从宝石位置滑动到顶部。

Answer 1

我相信这就是你想要的，或者非常相似。它们的关键是在一个方向上对其进行动画处理，然后将其重新定位为来自另一侧，然后再将其设置为动画

＆＃13;

＆＃13;

cartItems=[];
$('.jewel').css('opacity','1');
$('#add').click(function(){
    cartItems.push('item');
    $('#fixed-button').children('.jewel').animate({
        marginTop:'-100px',
        opacity:0
    },200,function(){
        $('.jewel').html(cartItems.length);
        $('#fixed-button').children('.jewel').css('margin-top',100);
        $('.jewel').show();
    }).animate({
        marginTop:'20px',
        opacity:1
    },200);
});
$('#rem').click(function(){
    cartItems.pop();
    $('#fixed-button').children('.jewel').animate({
        marginTop:'100px',
        opacity:0
    },200,function(){
        $('.jewel').html($('.jewel').html()*1-1);
        $('#fixed-button').children('.jewel').css('margin-top',-100);
    }).animate({
        marginTop:'20px',
        opacity:cartItems.length?1:0
    },200);
});

＆＃13;

*{
    margin:0;
    padding:0;
    font-family:sans-serif
}
#cart .btn{
    border-radius:50%;
    width:100px;
    height:100px;
    background-color:#FF0;
    position:relative;
    cursor:pointer;
    box-shadow:4px 4px 20px 0px rgba(0,0,0,.3);
}
.jewel{
    width:30px;
    height:30px;
    position:absolute;
    top:0;
    left:100%;
    margin-left:0px;
    margin-top:20px;
    border-radius:50%;
    background-color:#F00;
    color:#FFF;
    text-align:center;
    line-height:30px;
    font-size:18px;
    display:none;
    
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="cart">
<div 
    id="fixed-button"
    class="btn btn-fab btn-raised btn-material-yellow-600 mdi-action-list">
    <span id="jewel" class="jewel">0</span>
</button>
</div>
<button id="add">Add</button>
<button id="rem">Remove</button>

＆＃13;

＆＃13;

＆＃13;