Question

我有一个闰年功能，我想让它慢慢显示一个答案，然后在一段时间后慢慢消失。这是我的代码。

function isLeaper() {
            var image1 = '../images/yes.png';
            var image2 = '../images/no.png';
            var year = document.getElementById("isLeaper").value;
            var arr = year.split('/');
            var splitYear = arr[arr.length - 1];
            // 1. If the year is divisible by 4, but not 100.
            if ((parseInt(splitYear) % 4) == 0) {
                if (parseInt(splitYear) % 100 == 0) {
                    if (parseInt(splitYear) % 400 != 0) {
                        $('#myDiv').html(year + 'is not a leap year. Sorry!').fadeIn('normal', function() {
                            $(this).fadeOut();
                        });
                        // alert(year + 'is not a leap year. Sorry!');
                        return "false";
                    }
                    if (parseInt(splitYear) % 400 == 0) {
                        $('#myDiv').html(year + 'is a leap year. Hooray!').fadeIn('normal', function() {
                            $(this).fadeOut();
                        });

                        //alert(splitYear + ' is a leap year. Hooray! ');
                        return "true";
                    }
                }
                if (parseInt(splitYear) % 100 != 0) {
                    $('#myDiv').html(year + 'is a leap year. Hooray!').fadeIn('normal', function() {
                        $(this).fadeOut();
                    });

                    //alert(splitYear + ' is a leap year. Hooray! ');
                    return "true";
                }
            }
            if ((parseInt(splitYear) % 4) != 0) {
                $('#myDiv').html(year + 'is not a leap year. Sorry!').fadeIn('normal', function() {
                            $(this).fadeOut();
                        });

                //alert(splitYear + ' is not a leap year. Sorry! ');
                return "false";
            }
        }

        if ((parseInt(year) % 4) != 0) {
            alert(year + ' is not a leap year. Sorry!');
            return "false";
        }

我在html部分宣布了一个div，但什么也没发生。它设置为揭示一个答案，我也想修改是的答案来揭示图像yes.png和没有答案来揭示no.png图像。任何帮助将不胜感激。谢谢！

Answer 1

对于fadeIn，div必须为hidden

添加 CSS

#myDiv
{
    display:none;
}

然后试试。

另请阅读fadeIn http://api.jquery.com/fadeIn/

Answer 2

我做的事情如下：

$('#myDiv').html(year + 'is a leap year. Hooray!').fadeIn(500).delay(1000).fadeOut(500);

同样@Rohan提到了一个好点。应该看到div显示：隐藏在css中。

Javascript JQuery逐步显示图像

2 个答案: