Why animate doesn't work correctly??

N

Neoliz2015-12-09 21:45:50

JavaScript

Neoliz, 2015-12-09 21:45:50

Good evening!
Can you please tell me why, after clicking on the block, everything goes well for me, but when the animation ends, the UPPER BLOCK #callback_firelead gets a new width of 70px ??
We need it to reach a width of 530 px and stay at that.
.css

.callback{
    position: fixed;
    height:70px;
    width: 70px;
    z-index: 1000;
    bottom: 10%;
    right: 10%;
    cursor:pointer;
}

.callback-firelead-span-phone{
    display: block;
    background-color: #16B794;
    border-radius: 10px;
    width: 70px;
    float: right;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.callback-firelead-span-help{
    overflow: hidden;
    width: 0;
    height: 70;
    position: relative;
}

.help_tooltip_callback{
    background: #4C4C4C;
    position:absolute;
    bottom: 0px;
    /*width: 220px;
    right: 10%;*/
    width:0px;
    display:block;
    padding: 10px;
    margin: 10px;
    border-radius: 50px;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.help_tooltip_callback p {
    color: #fff;
    margin: 5px;
    padding-right: 10px;
}

.callback-firelead-div-body{
    background: #000;
    height: 70px;
    width: 0px;
    float:right;
}

.callback-display-none{
    display:none;
}

.callback-display-block{
    display:block;
}

html

<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="callback" id="callback_firelead" style="width:70px;">
    <span class="callback-firelead-span-phone callback-display-block" id="callback-fr-one" style="text-align:center; z-index:500;">
        <i class="fa fa-phone fa-4x" style="color:#fff; width:100%; line-height:70px;"></i>
    </span>
    <span class="callback-firelead-span-phone callback-display-none" id="callback-fr-two" style="text-align:center; z-index:500; position:absolute;">
        <i class="fa fa-phone fa-4x" style="color:#fff; width:100%;line-height:70px;"></i>
    </span>
    <div class="callback-firelead-div-body" id="callback-firelead-div-body">

    </div>
    <div class="callback-firelead-span-help" style="" id="callback-firelead-span-help">
        <div class="help_tooltip_callback" style="left: 220px" id="help_tooltip_callback">
            <p>Хотите мы Вам перезвоним?</p>
        </div>
    </div>
</div>
</body>

js code

function openHelpCallbackToll()
    {
        $('#callback_firelead').animate({width: '330px'}, 0, function (){
                $('#callback-firelead-span-help').animate({width: '260px'}, 0, function() {
                    $('#help_tooltip_callback').animate({width: '260px'}, 0);
                    $('#help_tooltip_callback').animate({left: '25px'}, 500);
                });
            });
    }


    function closeHelpCallbackToll()
    {
        $('#help_tooltip_callback').animate({left: '260px'}, 500, function() {
            $('#help_tooltip_callback').animate({width: '0px'}, 0, function() {
                $('#callback-firelead-span-help').animate({width: '0px'}, 0, function() {
                     $('#callback_firelead').animate({width: '70px'}, 0);
                });
            });
        });
    }

    $('#callback-fr-one').mouseover(function (){ //наведение мыши
            openHelpCallbackToll();
    });


    $('#callback-fr-one').mouseout(function (){ //убираю мышку мыши
        closeHelpCallbackToll();
    });
    
    //нажатие на кнопку
    $('#callback-fr-one').click(function (){
        $('#help_tooltip_callback').animate({left: '260px'}, 500, function() {
            $('#help_tooltip_callback').animate({width: '0px'}, 0, function() {
                $('#callback-firelead-span-help').animate({width: '0px'}, 0, function() {
                     $('#callback_firelead').animate({'width': '70px'}, 0, function() {
                         document.getElementById('callback-fr-one').classList.remove("callback-display-block");
                         document.getElementById('callback-fr-one').classList.add("callback-display-none");
                         document.getElementById('callback-fr-two').classList.remove("callback-display-none");
                         document.getElementById('callback-fr-two').classList.add("callback-display-block");
                         $('#callback_firelead').animate({'width': '530px'}, 2500);
                         $('.callback-firelead-span-phone').css({'float':'left'}, 0);
                         $('#callback-firelead-div-body').animate({width: '500px'}, 2500);
                     });
                });
            });
        });
    });