Странное поведение на слайдере jQuery, выполненном по индивидуальному заказу

Question

Я подумал, что создать собственный пользовательский слайдер контента с помощью jQuery было бы легко создать и создать достойный. В оболочке слайдера у меня есть ползунок и список слайдеров. Ползунок показывает только одну из трех областей содержимого.

Это HTML для слайдера:

<div id="featured_wrapper"> 

    <ul id="featured_content"> 

     <li class="item" id="item-3"> 
      <h1>Title item 3</h1> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
     </li> 

     <li class="item" id="item-2"> 
      <h1>Title item 2</h1> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
     </li> 

     <li class="item" id="item-1"> 
      <h1>Title item 1</h1> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
     </li> 

    </ul><!--/featured_content--> 

    <ul id="featured_list"> 

     <li class="item-link" id="item-link-3"> 
      <div class="item-container"> 
       <h2>Title item 3</h2> 
      </div> 
     </li> 

     <li class="item-link" id="item-link-2"> 
      <div class="item-container"> 
       <h2>Title item 2</h2> 
      </div> 
     </li> 

     <li class="item-link" id="item-link-1"> 
      <div class="item-container"> 
       <h2>Title item 1</h2> 
      </div> 
     </li> 

    </ul><!--/featured_list--> 

</div><!--/featured_wrapper--> 

#featured_content является содержание div и #featured_list список div.

Это CSS:

#featured_wrapper { background: transparent url('/Files/System/web/gfx/featured_content_item_bg.jpg') repeat-x top left; overflow: hidden; } 
#featured_content { float: left; height: 390px; width: 622px; background: transparent url('/Files/System/web/gfx/featured_content_item_bg.jpg') repeat-x top left; position: relative; } 
#featured_content li { position: absolute; display: block; width: 622px; height: 390px; } 
#featured_list { float: right; height: 390px; width: 338px; background: transparent url('/Files/System/web/gfx/featured_content_list_bg.png') repeat-y 0 -260px; } 
.item-link { height: 70px; padding: 30px 20px 30px 45px; cursor: pointer; } 
.item-link h2 { font-weight: bold; font-size: 16px; line-height: 1; } 

А вот код JQuery:

var bgpos = new Array(); 
    bgpos[0] = -260; 
    bgpos[1] = -130; 
    bgpos[2] = 0; 
$('#featured_content .item:not(:first-child)').css({'opacity': 0, 'margin-top': -20}); 
$('#featured_content .item:first-child').addClass('visible'); 
$('#featured_list .item-link').click(function(){ 

    var item = $(this).attr('id').split('-'); 
    var item_index = $(this).index(); 
    var item_id = 'item-' + item[2]; 

    /* 
    $('#featured_content .item:not(#' + item_id + ')').fadeOut('fast'); 
    $('#featured_content #' + item_id).fadeIn('fast'); 
    */ 

    $('#featured_content .item:not(#' + item_id + ')').animate({ 
     marginTop: -20, 
     opacity: 0 
    }, 200).addClass('visible'); 

    $('#featured_content #' + item_id).animate({ 
     marginTop: 0, 
     opacity: 1 
    }, 200).removeClass('visible'); 

    $('#featured_list').stop().animate({'backgroundPosition': '(0 ' + bgpos[item_index] + 'px)'}, {duration: 200}); 

}); 

Проблема заключается в том, что даже если первый элемент (пункт-3) видно, текст ISN выбирается, но слой под ним. Попробуйте нажимать на ссылки в области содержимого на тестовой странице Я настроил:

http://dev.drumroll.no/jquery-slider-fail/

Answer 1

Во-первых, вы, кажется, добавление и удаление класса под названием «видимая», который не существует в вашем стиле лист.

Затем вы устанавливаете непрозрачность на 0 при скрытии, но это не заставляет элемент уходить. Какой элемент находится на вершине еще будет один прием событие щелчка, даже если его непрозрачности 0.

Возьмите эту строку кода ...

$('#featured_content .item:not(:first-child)').css({'opacity': 0, 'margin-top': -20}); 

и установите непрозрачность .20 вместо нуль. Вы увидите проблему.

Вот решение:

Измените код следующим образом:

$('#featured_content .item:not(:first-child)').css({'opacity': 0, display:'none', 'margin-top': -20}); 
$('#featured_content .item:not(#' + item_id + ')').animate({ 
        marginTop: -20, 
        opacity: 0 
       }, 200, function(){$(this).css({display:'none'});}); 

$('#featured_content #' + item_id).css({display:'block',opacity:0}) 
            .animate({ 
        marginTop: 0, 
        opacity: 1 
       }, 200); 

Кроме того, удалить addClass ('видимую') и removeClass ('видимый'), где он появляется.

Сначала будет установлен каждый элемент слайдера: none (за исключением, конечно, для первого). Затем, когда исчезает элемент, в конце анимации есть обратный вызов, чтобы установить отображение: none.

При выцветании В элементе вам необходимо установить отображение: блок перед анимацией и установить непрозрачность в 0, чтобы вы по-прежнему получали эффект fadeIn.