Question

点击按钮（使用onclick），我在none和block之间切换三个div的显示样式。我不知道如何让这些div淡入淡出。我也愿意使用JQuery，但我不知道如何在这里集成和使用fadeIn()和fadeOut()函数。关于如何做到这一点的任何建议将不胜感激。

以下是被称为onclick的函数供参考，这是我的div的display属性被切换的地方。

function divSelector(count){
            if (count == 1){
                var temp = document.getElementById('second-about-text');
                temp.style.display = 'none';

                temp = document.getElementById('third-about-text');
                temp.style.display = 'none';

                temp = document.getElementById('first-about-text');
                temp.style.display = 'block';
            }
            else if (count == 2){
                var temp = document.getElementById('first-about-text');
                temp.style.display = 'none';
                temp = document.getElementById('third-about-text');
                temp.style.display = 'none';

                temp = document.getElementById('second-about-text');
                temp.style.display = 'block';   
            }
            else if (count == 3){
                var temp = document.getElementById('first-about-text');
                temp.style.display = 'none';
                temp = document.getElementById('second-about-text');
                temp.style.display = 'none';

                temp = document.getElementById('third-about-text');
                temp.style.display = 'block';   
            }   
            else{
                console.log("Count is nothing.");
            }
        }

Answer 1

由于您对JQuery持开放态度，请尝试以下方式：

我只是在这里假设你的标记。为你的div提供一个公共课，说content，以便用一个选择器访问它们。

 $('.content:gt(0)').hide(); //start up hide all but the first one.

function divSelector(count){

       var currElem = $('.content:eq(' + count-1 + ')'); //get the div based on the count number eq will give the div based on its index and position in DOM. Assuming these divs appear in DOM one after the other.
        $('.content').not(currElem).fadeOut('1000', function(){ //Fade out other content divs
             currElem.fadeIn('1000'); //Fade in the current one.
        });

    }

提供您的标记将清除假设并帮助提供更好的解决方案。

Answer 2

这是你需要的吗？

function divSelector(count){
                if (count == 1){
                    $('#second-about-text').fadeOut();
                    $('#third-about-text').fadeOut();
                    $('#first-about-text').fadeIn();
                }
                else if (count == 2){
                    $('#second-about-text').fadeIn();
                    $('#third-about-text').fadeOut();
                    $('#first-about-text').fadeOut();  
                }
                else if (count == 3){
                    $('#second-about-text').fadeOut();
                    $('#third-about-text').fadeIn();
                    $('#first-about-text').fadeOut();   
                }   
                else{
                    console.log("Count is nothing.");
                }
            }

Answer 3

以下是一个完全包含的示例：

jsFiddle here

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

        <style>
            .btn {height:50px;width:50px;margin:50px 50px;}
            .one{background-color:red;}
            .two{background-color:green;}
            .three{background-color:blue;}
        </style>

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

                count = 1;

                $('#mybutt').click(function() {
                    divSelector(count);
                    count++;
                    if (count==4) count = 1;
                });

                function divSelector(count){
                    if (count == 1){
                        $('#first-about-text').fadeIn(1000);
                        $('#second-about-text').hide();
                        $('#third-about-text').fadeOut(1000);;
                    }else if (count == 2){
                        $('#first-about-text').fadeOut(1000);
                        $('#second-about-text').fadeIn(1000);
                        $('#third-about-text').hide();;
                    }else if (count == 3){
                        $('#first-about-text').hide();
                        $('#second-about-text').fadeOut(1000);
                        $('#third-about-text').fadeIn(1000);;
                    }else{
                        console.log("Count is nothing.");
                    }
                }

            }); //END $(document).ready()

        </script>
    </head>
<body>

    <div id="first-about-text" class="btn one"></div>
    <div id="second-about-text" class="btn two"></div>
    <div id="third-about-text" class="btn three"></div>

    <input type="button" id="mybutt" value="Click Me">

</body>
</html>

如何在Javascript中更改其显示属性时，如何使我的元素淡入淡出？

3 个答案: