淡入和淡出两个元素

Question

我试图在单击按钮时淡入和淡出多个元素。

例如。

当item1点击的话，应该在淡出first和淡出second

小提琴的例子

码：

<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单击按钮示例：

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

 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; } 

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

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);
    });
});