Question

我很困惑想要进行简单的切换工作应该相当简单。我希望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>

Answer 1

您可以使用jQuery fadeToggle函数。

$('#toggleButton').click(function() {
    $("#toggleSection").fadeToggle("slow");
});

http://jsfiddle.net/mGdcm/16/

Answer 2

你需要在你的小提琴中设置jQuery，而不是MooTools。：）

同样为了淡入，请检查css display属性是否等于“none”。

http://jsfiddle.net/mGdcm/14/为您修正了版本。

Answer 3

您需要使用jQuery以及使用visible selector的正确代码：

$('#toggleButton').click(function() {
    if ($('#toggleSection:visible').length < 1) {
        $('#toggleSection').fadeIn("slow");
    }
    else {
        $('#toggleSection').fadeOut("slow");
    }
    return false;
});

Example

<小时/> Example starting with not visible

Answer 4

不是一个很好的解决方案，但它有效：）

$('#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;
});

Javascript-使用CSS不透明度信息

4 个答案: