Функция JQuery FadeOut не возникает с первой попытки

У меня есть страница с неупорядоченным списком вниз с одной стороны, чтобы переключаться между различными контейнерами с изображениями внутри справа от списка.Функция JQuery FadeOut не возникает с первой попытки

страница в вопросе по следующему адресу с кодом JQuery в голову тег:

http://dev.bathroomwarehouse.com/bathrooms.html

После нажатия пункта слева, как только страница загружена (например, «Бургундского ') изображения справа (инкапсулированные контейнером div) исчезают без анимации, несмотря на использование функции fadeOut в используемом JQuery.

После первого изменения, функция FADEOUT действует, как и ожидалось, и ДИВ вправо затухает, и новый ДИВ выцветает.

Может кто-нибудь помочь выяснить, почему это происходит?

Код в вопросе ниже:

Jquery

$(document).ready(function() { 
     $(".catList li").click(function() { 

      $(".catList li").removeClass('selectedRange'); 
      $(this).addClass("selectedRange"); 
      var clickedItem = $(this).index(".catList li"); 

      $(".images div").stop().fadeOut('slow', function() { 
       $(".images div").removeClass("selectedImageGroup"); 
      }); 

      $(".images div:eq(" + clickedItem + ")").delay(750).fadeIn(function() { 
       $(".images div:eq(" + clickedItem + ")").addClass("selectedImageGroup"); 
      }); 


     }); 
    });

HTML:

<div class="imageSelector"> 
     <ul class="catList"> 
      <li class="selectedRange"><h2>Ivory</h2>Modernist suite featuring with a touch of nostalgia…</li> 
      <li><h2>Burgundy</h2>Contemporary classic...</li> 
      <li><h2>Evergreen</h2>Minimalist with a unique shower feature...</li> 
     </ul> 
     <div class="vertLine">&nbsp;</div> 
     <div class="images"> 
      <div class="imageGroup selectedImageGroup"> 
       <table class="imageGroupTable"> 
        <tr> 
         <td colspan="3" class="imageGroupMainImage"> 
          <img src="img/ImageBrowser/B1/Main.jpg" alt="" /> 
         </td> 
        </tr> 
        <tr class="imageGroupSmallImages"> 
         <td><img src="img/ImageBrowser/B1/Img1.jpg" alt="" /></td> 
         <td><img src="img/ImageBrowser/B1/Img2.jpg" alt="" /></td> 
         <td><img src="img/ImageBrowser/B1/Img3.jpg" alt="" /></td> 
        </tr> 
       </table> 
      </div> 
      <div class="imageGroup"> 
       <table class="imageGroupTable"> 
        <tr> 
         <td colspan="3" class="imageGroupMainImage"> 
          <img src="img/ImageBrowser/B2/Main.jpg" alt="" /> 
         </td> 
        </tr> 
        <tr class="imageGroupSmallImages"> 
         <td><img src="img/ImageBrowser/B2/Img1.jpg" alt="" /></td> 
         <td><img src="img/ImageBrowser/B2/Img2.jpg" alt="" /></td> 
         <td><img src="img/ImageBrowser/B2/Img3.jpg" alt="" /></td> 
        </tr> 
       </table> 
      </div> 
      <div class="imageGroup"> 
       <table class="imageGroupTable"> 
        <tr> 
         <td colspan="3" class="imageGroupMainImage"> 
          <img src="img/ImageBrowser/B1/Main.jpg" alt="" /> 
         </td> 
        </tr> 
        <tr class="imageGroupSmallImages"> 
         <td><img src="img/ImageBrowser/B1/Img1.jpg" alt="" /></td> 
         <td><img src="img/ImageBrowser/B1/Img2.jpg" alt="" /></td> 
         <td><img src="img/ImageBrowser/B1/Img3.jpg" alt="" /></td> 
        </tr> 
       </table> 
      </div> 

     </div> 
    </div>

источник

2012-06-08 StrattonL

Пожалуйста отправьте соответствующий код в ваш вопрос. Прямая ссылка в порядке, но завтра она может исчезнуть, и сообщество предпочло бы, чтобы ваш вопрос выдержал это событие. –

Хорошо работает здесь: http://jsfiddle.net/j08691/FhCBY/ – j08691

Спасибо, вы можете сказать, почему он не работает на моей живой странице? – StrattonL

Это потому, что у вас есть display: block!important; первостепенную display: none; на вашем контейнере DIV. (Я не могу объяснить, почему это не работает, но это и есть причина проблемы.) Он работает после нажатия один раз, потому что он устанавливает встроенный стиль в display:block;. Если вы удалите строку CSS из display:none для элемента, затухание будет работать и на первом.

Пример повреждения: not working, working

источник

2012-06-08 21:09:50 Snuffleupagus

Спасибо, я понимаю, почему это сейчас, и я изменился соответствующим образом. Я удалил важное переопределение и сделал div проявлением программно, а не с помощью CSS. – StrattonL

@ Lukes123 хорошо, он не делает слишком много смысла, что он не работает с CSS, но он работает из встроенного стиля. Взгляните на jQuery, чтобы узнать, могу ли я узнать почему. – Snuffleupagus

Добавьте эту строку:

$('.images div:first').show();

сразу после

$(document).ready(function() {

источник

2012-06-08 21:38:13 Farahmand

Функция JQuery FadeOut не возникает с первой попытки

ответ

Смежные вопросы