Fade In / Out LI и изменение размера контейнера

Question

Fade In / Out LI и изменение размера контейнера

0

У меня есть следующая разметка (я создал пример в 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>

Я хотел бы иметь следующее:

Первоначально отображается только первый элемент LI.
Если щелкнуть тег A, если его значение href не является идентификатором видимого LI, тогда:
- Затухание тока LI;
- Изменение размера контейнера Slider DIV Высота до высоты отображаемого LI.
- Отобразится Fade в LI.

Как я могу сделать это с помощью JQuery?

Благодарю вас, Мигель

Miguel Moura 14 апр. 2014, в 00:39

Источник

Теги:

jquery

html

css

3 ответа

0

возможно, использование аккордеона jQueryUI решит вашу проблему.

Проверьте это: Аккордеон

Bartheleway 14 апр. 2014, в 05:19

0

Вот пример, который я сделал, я вырезал все правила 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 alrready visible do nothing
            else if($(this).is(':visible') && id == $(this).attr('id')){
            }
            else{
               $(this).fadeOut(100,function(){$(this).slideUp("fast")});
            }
        });
    });
});

DEMO

Michael 13 апр. 2014, в 21:38

0

Я не хочу видеть один слайд, чтобы подтолкнуть другой ... Я хотел бы исчезнуть, чтобы эффект не был виден.
Miguel Moura 14 апр. 2014, в 00:39
0

@MDMoura хорошо, вы можете легко сделать это с помощью fadeIn и fadeOut , проверить обновленный код и jsfiddle
Michael 14 апр. 2014, в 06:23

Ещё вопросы

Я не хочу видеть один слайд, чтобы подтолкнуть другой ... Я хотел бы исчезнуть, чтобы эффект не был виден.
@MDMoura хорошо, вы можете легко сделать это с помощью fadeIn и fadeOut , проверить обновленный код и jsfiddle

Amir5000 · Accepted Answer · 2014-04-13T21-19-00.000Z

Я считаю, что эта функция обмена должна делать трюк

Сначала добавьте класс currentStory к первым тегам LI и A <li id="S1" class="currentStory"> <a href="#S1" class="currentStory" id="S1">1</a>

Убедитесь, что ссылки имеют тот же идентификатор, что и их <li> элементы для этого.

<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);
        });
   });

});

Надеюсь, это то, что вы ищете.