mardi 4 mai 2021

Drag over 6 divs then hide

Can't seem to get this working. Here's what I am trying to do: There are 6 dirty teeth to brush. When the toothbrush collides with the dirty tooth, the dirty tooth fades out and then is removed (reveling the clean tooth under it). If all 6 teeth are brushed, the toothbrush fades away and the floss appears.

Right now, the toothbrush fades out when it leaves the dirty tooth.

    $(document).ready(function() {
var count=0

/*check count amount*/
function check(){
    if (count = 6){
        $('#toothbrush').fadeOut(2000, function() {$(this).remove();});
        $('#floss').css('opacity', '1');
    }
    else{return false;};
}

$(".toothbrushParent").draggable({containment: "#Face"});
    
$("#TeethDirtyUpper01").droppable({tolerance: "touch", preventCollision: true,
    over: function(event, ui) {
        $(this).fadeOut( 3000, function() {$(this).remove();});},
    out: function(event, ui) {
        count=count+1;
        check();
        return false;},
    }); 
});

Aucun commentaire:

Enregistrer un commentaire