CODEWITHSUNDEEP
javascriptjqueryhtmlcss
theGreenCabbage
theGreenCabbage

Reputation: 4845

Sliding from current location upwards for jQuery effects

I am making a cart "jewel" (like those iOS app icon notifications) that slides up when a quantity of the cart is increased, and slides down when the quantity of the cart is decreased. This is the code:

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>

The issue I am having is, the slide up effect isn't what I want. The icon in this case, slide from the TOP to the jewel location, instead of sliding from the jewel location to the top.

enter image description here

Upvotes: 1

Views: 76

Answers (1)

AwokeKnowing
AwokeKnowing

Reputation: 8236

I believe this is what you are going for, or very similar. They key is to animate it in one direction, then reposition it to come from the other side, then animate it again to the start

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);
});
*{
    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;
    
}
<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>

Upvotes: 2

Related Questions