淡入/淡出LI并调整容器的高度 [英] Fade In / Out LI and Resize Container's Height

问题描述

我有以下标记（我在代码笔中创建了示例）：

I have the following markup (I created an example in Code Pen):

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

我想拥有以下内容：

1. 最初只有第一个LI项目可见。

1. Initially only the first LI item is visible.

点击A标记时，如果其href值，不是可见的LI的ID那么：

When an A tag is clicked, if its href value, is not the ID of the visible LI then:

• 淡出当前的LI;


• 滑块容器DIV要显示的LI高度的高度。


• 显示LI中的淡入显示。

我如何用JQuery做到这一点？

How can I do this with JQuery?

谢谢你，
Miguel

Thank You, Miguel

推荐答案

我相信这个交换函数应该做的

I believe this swap function should do the trick

将currentStory类转换为第一个LI和A标签< li id =S1class =currentStory> < a href = ＃S1class =currentStoryid =S1> 1< / a>

First add the currentStory class to the first LI and A tags <li id="S1" class="currentStory"> <a href="#S1" class="currentStory" id="S1">1</a>

确保链接具有相同的ID

Make sure the links have the same ID as their <li> items for this to work

< a href = < ＃S1class =currentStoryid =S1> 1< / a>
< a href =＃S2id = 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);
        });
   });

});

希望这是您正在寻找的内容。

Hope this is what you are looking for.

这篇关于淡入/淡出LI并调整容器的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！