我很困惑想要进行简单的切换工作应该相当简单。我希望div在不透明度为100时淡出,在0为淡入时淡出。http://jsfiddle.net/mGdcm/8/
使用Javascript -
$('#toggleButton').click(function() {
if ($('#toggleSection').css("opacity") === 0) {
$('#toggleSection').fadeIn("slow");
}
else {
$('#toggleSection').fadeOut("slow");
}
return false;
});
HTML -
<a href="#" id="toggleButton">toggle</a>
<div id="toggleSection" style="opacity:0;"> <p>Why isn't this working?</p></div>
答案 0 :(得分:2)
您可以使用jQuery fadeToggle函数。
$('#toggleButton').click(function() {
$("#toggleSection").fadeToggle("slow");
});
答案 1 :(得分:1)
你需要在你的小提琴中设置jQuery,而不是MooTools。 :)
同样为了淡入,请检查css display
属性是否等于“none”。
http://jsfiddle.net/mGdcm/14/为您修正了版本。
答案 2 :(得分:1)
您需要使用jQuery以及使用visible selector的正确代码:
$('#toggleButton').click(function() {
if ($('#toggleSection:visible').length < 1) {
$('#toggleSection').fadeIn("slow");
}
else {
$('#toggleSection').fadeOut("slow");
}
return false;
});
<小时/> Example starting with not visible
答案 3 :(得分:0)
不是一个很好的解决方案,但它有效:)
$('#toggleButton').click(function() {
console.log($('#toggleSection').css("opacity"));
if ($('#toggleSection').css("opacity") == 0) {
$('#toggleSection').fadeIn("slow", function(){
$('#toggleSection').css("opacity", 1);
});
}
else {
$('#toggleSection').fadeOut("slow", function(){
$('#toggleSection').css("opacity", 0);
});
}
return false;
});