问分隔器渐入渐出
EN

Stack Overflow用户

提问于 2015-06-19 04:08:53

回答 1查看 100关注 0票数 0

我有一个由7个元素组成的菜单。每当单击一个元素时，它的内容就会以淡入的方式出现。如果单击另一个元素，则当前内容淡出，新内容淡入。我将这一概念应用于菜单中的7个元素中的3个，但我面临两个问题：( 1) A没有褪色，在进入和退出中存在一个时间问题，其中一个内容可能与另一个内容发生冲突。有什么帮助吗？

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：http://jsfiddle.net/ktyxr77y/

javascript

jquery

html

css

音视频低代码开发方案最快1天上线

推出 TUICallKit 和 TUIRoomKit 低代码集成方案，最快1天接入在线教育、语聊房、在线客服等应用

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-06-19 04:31:59

这里有一点不同的方法，可以更可扩展：JS Fiddle

此外，为了提供真正的fadeIn/fadeOut交叉淡出，您可以在包装器中添加一个absolute位置(可能需要调整位置)。

增加CSS：

#first, #second, #third { position: absolute;}

Jquery：

$('li').on('click', function() {
    //get last character of the li
    var lastChar = $(this).attr('id').slice(-1);
    //set which section to change based on the last character of the li's id

    if (lastChar == 1) {
        section = $('#first');
    }
    if (lastChar == 2) {
        section = $('#second');
    }

    if (lastChar == 3) {
        section = $('#third');
    }

    $('#first, #second, #third').not(section).fadeOut(1000, function() {
        $(section).fadeIn(1000);
    });
});