我有一个触发动画的按钮。当我再次点击按钮时,它会切换类,但在动画之后,不透明度仍然在我的代码中。
所有后续的点击都会发生这种情况。我该如何解决这个问题?
$( "#menu-button" ).click(function() {
$("#right-sidebar").toggleClass("display");
if($("#right-sidebar").hasClass("display") == false){
$("#right-sidebar").css(opacity = "0");
} else {
$("#right-sidebar").animate({
opacity: "1"
}, "slow");
}
});
问题来自.css(opcity = "0")
@Mohammad在评论中提到,只要修复这个,你的代码将工作良好:
$( "#menu-button" ).click(function() {
$("#right-sidebar").toggleClass("display");
if(!$("#right-sidebar").hasClass("display")){
$("#right-sidebar").css("opacity", "0");
} else {
$("#right-sidebar").animate({
opacity: "1"
}, "slow");
}
});
#right-sidebar{
width:80%;
height: 100px;
float: right;
background-color: green;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-lg btn-primary" id="menu-button">menu</button>
<div id='right-sidebar' class="display">right sidebar</div>
您应该尝试bind
而不是click
$( "#menu-button" ).bind("click", function() {
$("#right-sidebar").toggleClass("display");
if($("#right-sidebar").hasClass("display") == false){
$("#right-sidebar").css("opacity","0");
} else {
$("#right-sidebar").animate({
opacity: 1
}, "slow");
}
});