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

Question

On the click of a button (using onclick), I am toggling the display style of three divs between none and block . 单击按钮（使用onclick）时，我在none和block之间切换了三个div的显示样式。 I am at a loss as to how I can make these divs fade in and out. 我不知道如何使这些div淡入淡出。 I am open to using JQuery as well but I do not see how I could integrate andéor use the fadeIn() and fadeOut() functions here. 我也愿意使用JQuery，但在这里看不到如何集成和使用fadeIn()和fadeOut()函数。 Any suggestions as to how I can go about doing this would be greatly appreciated. 关于如何进行此操作的任何建议将不胜感激。

Below is the function that is being called onclick for reference, this is where the display attribute of my divs is toggled. 下面是被称为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

Since you are open to JQuery try this way: 由于您愿意使用JQuery，请尝试以下方式：

I am just assuming your markup here. 我只是假设您在这里加价。 Give a common class to your divs say content so that they are accessible with one selector. 给您的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.
        });

    }

providing your markup will clear out the assumptions and help provide a better solution. 提供您的标记将清除假设并帮助提供更好的解决方案。

Answer 2

Is it what you need? 是你需要的吗？

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

Here is a fully contained example for you: 这是为您提供的完整示例：

jsFiddle here 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>

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

问题描述

3 个解决方案

解决方案1
3 2013-06-23 01:31:45

解决方案2
1 2013-06-23 01:26:34

解决方案3
1 已采纳 2013-06-23 01:42:17

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

问题描述

3 个解决方案

解决方案1 3 2013-06-23 01:31:45

解决方案2 1 2013-06-23 01:26:34

解决方案3 1 已采纳 2013-06-23 01:42:17

解决方案1
3 2013-06-23 01:31:45

解决方案2
1 2013-06-23 01:26:34

解决方案3
1 已采纳 2013-06-23 01:42:17