JQuery исчезают в проблеме - PullRequest
Новая
       35

JQuery исчезают в проблеме

0 голосов
/ 16 июня 2011

Я пытаюсь создать эффект затухания, используя jQuery, html и CSS, но безрезультатно.По сути, это навигационный список с эффектом прокрутки галереи с использованием jQuery. Прокрутка по контактной ссылке приводит к появлению всплывающего окна с контактной информацией и т. Д. Для служб, например и т. Д.

Используемый мной скрипт галереи можно найти здесь

всякий раз, когда я применяю .fadein (медленно), я получаю желаемый эффект, но в обратном порядке.Вместо перехода от прозрачного к непрозрачному ::: вы получите картинку.Я также пробовал 

.animate({opacity: '0.5'}, 1000)

с теми же результатами, что и выше

Как выглядит мой скрипт jOuery: 

<script type>
$(document).ready(function() {
    // Image swap on hover
    $("#gallery ul li img").hover(function(){
        $('#main-img').stop().fadeTo('slow',0.3).siblings()
          .stop().fadeTo('slow',1.0).attr('src',$(this).attr('src').replace('thumb/', ''));
    });
    // Image preload
    var imgSwap = [];
     $("#gallery ul li img").each(function(){
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}
</script>

HTML: 

<div id="left_nav">
    <div id="gallery">
     <img src="images/gallery/home.png" alt="" id="main-img" />
      <ul>
        <li class="home"><img src="images/gallery/thumb/home.png" alt="" /></li>
        <li class="about"><img src="images/gallery/thumb/About Us.png" alt="" /></li>
        <li class="contact"><img src="images/gallery/thumb/Contact Us.png" alt="" /></li>
        <li class="services"><img src="images/gallery/thumb/Services.png" alt="" /></li>
      </ul>
    </div> 
  </div>

Я также пытался изменить настройки непрозрачности, потому что это казалось бы здравым смыслом.Это приводит только к непрозрачному аффекту, но не к его усилению. Я снимаю для эффекта аффекта для большого пальца.Кроме того, скрипт fade не работает в IE 8. Есть идеи?

Ответы [ 2 ]

1 голос
/ 16 июня 2011

Ух, здесь происходит какое-то сцепление. Почему вы должны исчезнуть и у братьев и сестер (т. Е. Тег ul)? Может ты это имел ввиду? 

$('#main-img').attr('src', $(this).attr('src').replace('thumb/', '')).stop();
$('#main-img').hide();
$('#main-img').fadeIn();

Это намеренно не расковано. По какой-то причине объединение в цепочку вызовов hide и fadeIn может перестать работать в некоторых браузерах, таких как IE.

0 голосов
/ 16 июня 2011

Полагаю, вам нужно установить непрозрачность на 0, прежде чем перейти к 0,5 или какому-либо другому значению.Если непрозрачность равна 1, и вы говорите, что она затухает до 0,5, она изменится с 1 -> 0,5.

...