如何在Javascript中更改其顯示屬性時使元素淡入和淡出？

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在這里

<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