0

单击按钮（使用 onclick）时，我在none和之间切换三个 div 的显示样式block。我不知道如何使这些 div 淡入淡出。我也对使用 JQuery 持开放态度，但我不知道如何在这里集成 andé 或使用fadeIn()andfadeOut()函数。任何关于我如何去做这件事的建议都将不胜感激。

下面是被调用onclick以供参考的函数，这是我的 div 的显示属性被切换的地方。

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.");
            }
        }
4

3 回答 3

3

由于您对 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.
        });

    }

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

于 2013-06-23T01:31:45.943 回答
1

这是你需要的吗？

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.");
                }
            }
于 2013-06-23T01:26:34.120 回答
1

这是一个完整的示例：

jsFiddle在这里

<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>
于 2013-06-23T01:42:17.173 回答