当前位置: 动力学知识库 > 问答 > 编程问答 >

css - jQuery Animation .stop() issue

问题描述:

Hi im creating a custom switch unsing jquery, css and html. At first it was working fine, until when you rapidly click on the switch the animation is not as expected. I used animation stop but it's still not working.

$('.options').click(function () { var holder = $(this).parent('.switch-holder'); if (parseInt(holder.css('margin-left')) >= "0") { // naka off holder.stop(false, true).animate({ "margin-left": "-=50px" }, "slow"); } else { holder.stop(false, true).animate({ "margin-left": "+=50px" }, "slow"); }});

.switch-container {

padding: 0px;

margin-top: 4px;

font-size: 0px;

display: inline-block;

width: 100px;

height: 35px;

overflow:hidden;

outline: solid 1px black;

}

.switch-container .switch-holder {

width: 150px;

height: inherit;

}

.switch-container .options {

font-size: 10px;

display: inline-block;

height: inherit;

box-sizing: border-box;

float: left;

width: 33.33%;

background: grey;

padding:0px;

margin: 0px;

}

.switch-container .on {

background: green;

}

.switch-container .off {

background: red;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="switch-container">

<div class="switch-holder">

<div class="options off">Off</div>

<!-- !-->

<div class="options"> </div>

<!-- !-->

<div class="options on">On</div>

</div>

</div>

网友答案:

Try using the .finish() method instead of .stop(). From the documentation:

When .finish() is called on an element, the currently-running animation and all queued animations (if any) immediately stop and their CSS properties set to their target values. All queued animations are removed.

Code snippet:

$('.options').click(function () {    var holder = $(this).parent('.switch-holder').finish();    if(!holder.hasClass('open')) {        // naka off        holder.animate({            "margin-left": "-=50px"        }, "slow").addClass('open');    } else {        holder.animate({            "margin-left": "+=50px"        }, "slow").removeClass('open');    }});
.switch-container {
    padding: 0px;
    margin-top: 4px;
    font-size: 0px;
    display: inline-block;
    width: 100px;
    height: 35px;
    overflow:hidden;
    outline: solid 1px black;
}
.switch-container .switch-holder {
    width: 150px;
    height: inherit;
}
.switch-container .options {
    font-size: 10px;
    display: inline-block;
    height: inherit;
    box-sizing: border-box;
    float: left;
    width: 33.33%;
    background: grey;
    padding:0px;
    margin: 0px;
}
.switch-container .on {
    background: green;
}
.switch-container .off {
    background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switch-container">
    <div class="switch-holder">
        <div class="options off">Off</div>
        <!-- !-->
        <div class="options"> </div>
        <!-- !-->
        <div class="options on">On</div>
    </div>
</div>
分享给朋友:
您可能感兴趣的文章:
随机阅读: