淡入淡出两个元素

Question

单击按钮时，我尝试淡入并淡出多个元素。

例如。

点击item1后，它应淡入first并淡出second

Example Fiddle

代码：

<div id="menu" class="menu">
        <ul class="headlines">
             <li id="item1"onclick="checklist(this)"><button onclick="myFunction()">A</button></li>
            <li id="item2"><button onclick="myFunction2()">B</button></li>

        </ul>
        </div>

<div id="first">
<img id="image1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image2" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image3" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image4" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
</div>


        <div id="second">
        This is my DIV2 element.
    </div>

<script>
 function myFunction() {
    $("#second").fadeOut(2000, function(){
        $("first").fadeIn(6000);
    });
}
<script/>

<script>
   function myFunction2() {
    $("first").fadeOut(2000, function(){
        $("#second").fadeIn(6000);
    });
}
<script/>

CSS：

li{
    list-style-type: none;
    font-size: 1.5em;
    height: 40px;
    width: 180px;
    text-align:right;    
    border-style: none;

}

.menu{

    width:150px;
    height: 350px;

   }

.menu li{  
position: relative;
  top:150px; 
  bottom: 0;
  left: 695px;
  right:0;
  margin: auto; 
  border-style:none;

}

#second {
            width: 500px;
            height: 500px;
            background-color: lightblue;
            display: none;
        }

#first
{
    width: 500px;
            height: 500px;
    background-color: red;
            display: none;
}

Answer 1

在我的示例之前只是一个快速提示，我建议尝试摆脱内联JavaScript并使用JQuery我肯定会推荐它。

在此示例中，它将向您展示如何在单击按钮时淡化元素。

JQuery点击按钮示例：

＆＃13;

＆＃13;

$(document).on('click','#item1', function()
{ 
    $("#second").fadeOut(2000, function(){
        $("#first").fadeIn(6000);
    });

});


$(document).on('click','#item2', function()
{ 
    $("#first").fadeOut(2000, function(){
        $("#second").fadeIn(6000);
    });
});

＆＃13;

li{
    list-style-type: none;
    font-size: 1.5em;
    height: 40px;
    width: 180px;
    text-align:right;    
    border-style: none;
    
}

.menu{

    width:150px;
    height: 350px;
 
   }

.menu li{  
position: relative;
  top:150px; 
  bottom: 0;
  left: 695px;
  right:0;
  margin: auto; 
  border-style:none;
    
}

#second {
            width: 500px;
            height: 500px;
            background-color: lightblue;
            display: none;
        }

#first
{
    width: 500px;
            height: 500px;
    background-color: red;
            display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="menu" class="menu">
        <ul class="headlines">
             <li id="item1"><button>A</button></li>
            <li id="item2"><button>B</button></li>
            
        </ul>
        </div>

<div id="first">
<img id="image1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image2" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image3" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image4" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
</div>
      

<div id="second">
   This is my DIV2 element.
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你在找这样的东西吗？

$(document).ready(function(){
    $("#item1").click(function() { 
        $("#first").fadeIn();
        $("#second").fadeOut();
    });
    $("#item2").click(function() { 
        $("#first").fadeOut();
        $("#second").fadeIn();
    });
});

正在使用 JSFiddle

Answer 3

在JSFiddle中不要使用“ONCLICK”

JSFiddle

$(".button_A").click(function(){
    $("#second").fadeOut(2000, function(){
        $("#first").fadeIn(6000);
    });
});

$(".button_B").click(function(){
    $("#first").fadeOut(2000, function(){
        $("#second").fadeIn(6000);
    });
});