Jquery 淡入/淡出LI并调整容器大小'；s高度

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

第一个口号



第一个口号

我希望有以下资料：

最初，只有第一个li项可见

单击A标记时，如果其href值不是可见li的ID，则：

• 淡出电流
• 将滑块容器DIV Height调整为要显示的li的高度
• 在li中淡入显示

如何使用JQuery实现这一点

谢谢,，

---

米格尔

我相信这个交换功能应该能起到作用

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

确保链接与其
项具有相同的ID，以使其正常工作



希望这就是您想要的。
这里是我制作的一个示例，我删除了所有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")});
            }
        });
    });
});

也许使用jQueryUI手风琴可以解决您的问题

选中此项：
我不想看到一张幻灯片推另一张幻灯片。。。我想要淡入淡出，这样效果就不可见了。@MDMoura好的，你可以很容易地用
fadeIn
和
fadeOut
，检查更新的代码和jsfiddle
$(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);
        });
   });

});

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