Question

我有一个包含7个元素的菜单。每当单击一个元素时，其内容将通过淡入显示。如果单击另一个元素，则当前内容淡出并且新内容淡入。我将这个概念应用到我的菜单中的7个元素中的3个，但是我遇到了一些问题，例如一些内容没有褪色，以及内容淡入和退出的延迟问题，这是一个领先的问题。内容之间的冲突，无论如何在菜单的所有元素上应用工作解决方案？

HTML：

<div id="menu" class="menu">
        <ul class="headlines">
             <li id="item1"onclick="checklist(this)"><button >A</button></li>
            <li id="item2"><button >B</button></li>
            <li id="item3"><button >C        </button></li>
            <li id="item4"><button>D         </button></li>
            <li id="item5"><button>E   </button></li>
            <li id="item6"><button>F       </button></li>
            <li id="item7"><button>G       </button></li>
<!--                  <li> <input type="button" value="animation" OnClick="checklist(this)"> </input>
  </li>-->
        </ul>
        </div>


        <div id="first">
<img id="image1" src="http://placehold.it/350x150"/>
<img id="image2" src="http://placehold.it/350x150"/>
<img id="image3" src="http://placehold.it/350x150"/>
<img id="image4" src="http://placehold.it/350x150"/>
<img id="image5" src="http://placehold.it/350x150"/>
<img id="image6" src="http://placehold.it/350x150"/>
<img id="image7" src="http://placehold.it/350x150"/>
<img id="image8" src="http://placehold.it/350x150"/>
<img id="image9" src="http://placehold.it/350x150"/>
<img id="image10"src="http://placehold.it/350x150"/>
</div>


        <div id="second">
        <img id="image1" src="http://placehold.it/350x150"/>
<img id="image2" src="http://placehold.it/350x150"/>
<img id="image3" src="http://placehold.it/350x150"/>
<img id="image4" src="http://placehold.it/350x150"/>
<img id="image5" src="http://placehold.it/350x150"/>
<img id="image6" src="http://placehold.it/350x150"/>
<img id="image7" src="http://placehold.it/350x150"/>
<img id="image8" src="http://placehold.it/350x150"/>
<img id="image9" src="http://placehold.it/350x150"/>
<img id="image10"src="http://placehold.it/350x150"/>
    </div>

        <div id="third">
        <img id="image1" src="http://placehold.it/350x150"/>
<img id="image2" src="http://placehold.it/350x150"/>
<img id="image3" src="http://placehold.it/350x150"/>
<img id="image4" src="http://placehold.it/350x150"/>
<img id="image5" src="http://placehold.it/350x150"/>
<img id="image6" src="http://placehold.it/350x150"/>
<img id="image7" src="http://placehold.it/350x150"/>
<img id="image8" src="http://placehold.it/350x150"/>
<img id="image9" src="http://placehold.it/350x150"/>
<img id="image10"src="http://placehold.it/350x150"/>
</div>

CSS：

#first
{
    display: none;
    width: 50%;
    height: 220px;
    margin:auto;
    padding-left: 150px;
    margin-top: -215px;

}
#first img 
{
    height: 100px;
    width: 100px;
    float:left;
    margin-right: 5%;
    cursor: pointer;
}

#second
{
    display: none;
    width: 50%;
    height: 220px;
    margin:auto;
    padding-left: 150px;
    margin-top: -215px;

}
#second img 
{
    height: 100px;
    width: 100px;
    float:left;
    margin-right: 5%;
    cursor: pointer;
}

#third
{
    display: none;
    width: 50%;
    height: 220px;
    margin:auto;
    padding-left: 150px;
    margin-top: -215px;

}
#third img 
{
    height: 100px;
    width: 100px;
    float:left;
    margin-right: 5%;
    cursor: pointer;
}

 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;

}

JQUERY：

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

});


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


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

的jsfiddle：https://jsfiddle.net/co5tpz2p/1/

Answer 1

好的，不得不在HTML中做一些重大改变，但一切都按现在的方式运行。查看updated fiddle。

新方法现在我们有一个#container div负责淡入淡出，而内部div（#first，#second和#third）只是根据点击的按钮显示/隐藏。

注意：我删除了按钮A的onclick属性，因为小提琴中未定义checklist函数，因此吐出错误。如果您打算使用我的解决方案，请不要忘记阅读它。

淡化图像容器

1 个答案: