淡入/淡出 LI 和调整容器高度答案

【问题标题】：Fade In / Out LI and Resize Container's Height淡入/淡出 LI 和调整容器高度
【发布时间】：2014-04-14 14:37:26
【问题描述】：

我有以下标记（我在代码笔中创建了一个example）：

<div class="slider">
  <ul>
    <li id="S1">
      <div class="txt"><p>First slogan</p></div>
      <div class="img"><img src="http://placehold.it/800x180" /></div>      
    </li>
    <li id="S2">
      <div class="txt"><p>First slogan</p></div>
      <div class="img"><img src="http://placehold.it/800x280" /></div>
    </li>
  </ul>
  <a href="#S1">1</a>
  <a href="#S2">2</a>
</div>

我想要以下：

最初只有第一个 LI 项可见。
当一个A标签被点击时，如果它的href值不是可见LI的ID则：
- 淡出当前的LI；
- 将 Slider 容器 DIV Height 的大小调整为要显示的 LI 的高度。
- 会显示 LI 的淡入淡出。

我怎样才能用 JQuery 做到这一点？

谢谢你，米格尔

【问题讨论】：

标签： jquery html css

【解决方案1】：

我相信这个交换功能应该可以解决问题

首先将currentStory类添加到第一个LI和A标签<li id="S1" class="currentStory"><a href="#S1" class="currentStory" id="S1">1</a>

确保链接的 ID 与其 <li> 项目的 ID 相同

<a href="#S1" class="currentStory" id="S1">1</a> <a href="#S2" id="S2">2</a>

$(document).ready(function() {

  function swapStory(storyName){
$('.slider li.currentStory').hide();
$('.slider li.currentStory').removeClass('currentStory');
$('.slider [id = ' + storyName + ']').addClass('currentStory');
$('.slider [id = ' + storyName + ']').fadeIn("slow");
  }

  $(function() {

     $('.slider li:not(".currentStory")').hide();
        $('.slider a').click(function(){
            swapStory($(this).attr("id"));
            return(false);
        });
   });

});

希望这就是你要找的。p>

【讨论】：

【解决方案2】：

这是我做的一个例子，我把所有的css规则都剪掉了，用jquery把它们简单化了。

当然，您需要将媒体查询放回其中。

Jquery-

$(document).ready(function(){
    $('a').click(function(e){
       var id = $(this).attr('href').split("#").pop();
       var li = $('.slider ul li');
       $('.slider ul li').each(function(key,v){
           //if  linked to li is hidden show it
           if($(this).is(':hidden') && id == $(this).attr('id')){
                $(this).fadeIn(500).slideDown("fast");
            }
            //if it's alrready visible do nothing
            else if($(this).is(':visible') && id == $(this).attr('id')){
            }
            else{
               $(this).fadeOut(100,function(){$(this).slideUp("fast")});
            }
        });
    });
});

DEMO

【讨论】：

我不想看到一张幻灯片推动另一张幻灯片...我想淡入淡出，这样效果就看不到了。
@MDMoura 好的，您可以使用 fadeIn 和 fadeOut 轻松完成，检查更新的代码和 jsfiddle

【解决方案3】：

也许使用 jQueryUI 手风琴会解决你的问题。

检查这个：Accordion

【讨论】：