javascript - 分隔符淡入淡出

Question

我有一个包含 7 个元素的菜单。每当单击一个元素时，其内容都会淡入。如果单击另一个元素，则当前内容淡出，新内容淡入。我将这个概念应用于我菜单中 7 个元素中的 3 个，但是我面临 2 个问题:1)A没有淡入2) 淡入和淡出存在时间问题，内容可能会与另一个内容发生冲突。有帮助吗？

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/

Answer 1

这里有一个稍微不同的方法，可以更具扩展性:JS Fiddle

此外，要提供真正的淡入/淡出交叉淡入淡出，您可以向包装器添加一个绝对位置(可能需要调整位置)。

添加的 CSS:

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

J查询:

$('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);
    });
});

注意:我只是为了演示而加快了过渡。