淡入/淡出LI并调整容器的高度

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

我有以下标记(我在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>

I would like to have the following:

我想要以下内容:

Initially only the first LI item is visible.

最初只有第一个LI项可见。
When an A tag is clicked, if its href value, is not the ID of the visible LI then:

单击A标记时,如果其href值不是可见LI的ID,则:
- Fade out current LI;
- Resize Slider container DIV Height to the height of the LI to be displayed.
- Fade in the LI do be displayed.

How can I do this with JQuery?

我怎么能用JQuery做到这一点?

Thank You, Miguel

谢谢你,米格尔

3 个解决方案

#1

I believe this swap function should do the trick

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

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>

首先将currentStory类添加到第一个LI和A标签

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

确保链接具有与其

项相同的ID,以使其生效

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

1 2

$(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.

希望这是你正在寻找的。

#2

Here is an Example that i made, i cut out all the css rules and made them simple with jquery.

这是我做的一个例子,我删除了所有的css规则,并用jquery使它们变得简单。

of course you'll need to put your media-queries back in it.

当然,您需要将媒体查询重新放入其中。

the 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

#3

maybe using the jQueryUI accordion will solve your problem.

也许使用jQueryUI手风琴将解决您的问题。

Check this : Accordion

检查一下:手风琴

#1