0

如果屏幕上显示另一个 div,我需要让一个 div 淡出。有人告诉我,我需要使用 Javascript 来执行此操作,并使其自动加载。

有谁知道解决方案?

我已经用谷歌搜索了,我试图编辑以下内容,但我没有运气实现它。

<script type="text/javascript">
    window.onLoad(function () {
        if ($('.section5').is(":visible")) {
            $(".arrow").fadeOut(fast);
        } else if ($('.section5').is(":hidden")) {
            $('.arrow').fadeIn(fast);
        }
    });
</script>
4

2 回答 2

2

window.onLoad不是一个function用途$(function(){...})

而且fast是一个stringvariable试试这个,

$(function () {
    if ($('.section5').is(":visible")) {
        $(".arrow").fadeOut('fast');
    } else if ($('.section5').is(":hidden")) {
        $('.arrow').fadeIn('fast');
    }
});
于 2013-10-30T12:18:53.087 回答
0

如果您正在寻找解决方案以在向下或向上滚动页面时使 div 显示/隐藏,并在滚动页面时使其可见并且滚动后另一个 div 不在页面上,这就是您应该做的做:

假设滚动时应该在表单上可见的 div 是这样的:

<div id='div1'></div>

并且应该相应地隐藏和显示的 div 是这样的:

 <div id='div2'></div>

这是您显示使用的脚本:

<script type="text/javascript">
    $(document).ready(function () {

        AdjustDiv();

        $(window).scroll(function () {
            AdjustDiv();
        })
    });

    function AdjustDiv() {
        var windowheight = window.innerHeight;
        var div1height = $('#div1').height();


        var scroll_top = $(window).scrollTop();
        var div1top = $('#div1').offset().top;


        var window_bottom = scroll_top + windowheight;
        var div1_bottom = div1top + div1height;


        if
        (
            (
                (scroll_top >= div1top)
                &&
                (scroll_top < div1_bottom)
            )
            ||
            (
                (scroll_top <= div1top)
                &&
                (window_bottom >= div1_bottom)
            )
            ||
            (
                (scroll_top <= div1top)
                &&
                (window_bottom > div1top)
            )
        ) {
            $('body').css('background-color', 'green');
        }
        else {
            $('body').css('background-color', 'red');
        }
    }
</script>

仅用于演示,如果 div1 不可见,我将背景变为红色,如果可见,则变为绿色

这是完整的示例,请尝试:

        <html>
        <head>
            <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        </head>
        <body>
            <div id='div0' style='border: solid 1px black;'>
                <p>
                    aadsa dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas da2121212121s dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
            </div>
            <div id='div1' style='border: solid 1px black;'>
                <h1>
                    DIV 1</h1>
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
            </div>
            <div id='div3' style='border: solid 1px black;'>
                <p>
                    aadsa dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas da2121212121s dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
            </div>
            <div id='div4' style='border: solid 1px black;'>
                <p>
                    aadsa dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas da2121212121s dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
                <br />
                <p>
                    tdasd dasdas das dasdas das das</p>
            </div>
            <div id='div2' style='border: solid 1px black;'>
                div 2<br />
                div 2<br />
                div 2<br />
                div 2<br />
            </div>
            <script type="text/javascript">
                $(document).ready(function () {

                    AdjustDiv();

                    $(window).scroll(function () {
                        AdjustDiv();
                    })
                });

                function AdjustDiv() {
                    var windowheight = window.innerHeight;
                    var div1height = $('#div1').height();


                    var scroll_top = $(window).scrollTop();
                    var div1top = $('#div1').offset().top;


                    var window_bottom = scroll_top + windowheight;
                    var div1_bottom = div1top + div1height;


                    if
                    (
                        (
                            (scroll_top >= div1top)
                            &&
                            (scroll_top < div1_bottom)
                        )
                        ||
                        (
                            (scroll_top <= div1top)
                            &&
                            (window_bottom >= div1_bottom)
                        )
                        ||
                        (
                            (scroll_top <= div1top)
                            &&
                            (window_bottom > div1top)
                        )
                    ) {
                        $('body').css('background-color', 'green');
                    }
                    else {
                        $('body').css('background-color', 'red');
                    }
                }
            </script>
        </body>
        </html>
于 2013-10-30T14:29:57.317 回答