JQuery fadeTo() Функция с scrollTop()

Я пытаюсь использовать fadeTo() в функции scrollTop(). Во-первых, я пробую его с fadeIn и fadeOut, который отлично работает. Но я хочу сохранить истинную высоту изображения. Я изменил непрозрачность в моем CSS до 0 и хочу показать изображение, когда scrollposition находится между 30 и 200.JQuery fadeTo() Функция с scrollTop()

<script type="text/javascript"> 
     $(document).scroll(function() { 
      if ($(this).scrollTop() > 30 && $(this).scrollTop() < 200) { 
       $("#amy").fadeTo("slow", 1); 
      } else { 
       $("#amy").fadeTo("slow", 0); 
      } 
     }); 
    </script>

CSS:

#amy { 
    padding-top: 20px; 
    margin-bottom: -50px; 
    max-width: 155px; 

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    -moz-opacity: 0; 
    -khtml-opacity: 0; 
    opacity: 0; 
}

Условный работает с FadeIn $ FADEOUT, но не с fadeTo. Не знаете, почему? Не поддерживается ли fadeTo с помощью scrollTop?

источник

2013-11-01 mnlfischer

JQuery «fadeto()» используется для настройки непрозрачности согласованных элементов. В вашем примере вы устанавливаете непрозрачность от 1 до 0. Как я знаю, непрозрачность 0 является скрытым элементом, а непрозрачность 1 - видимым элементом. Если вы хотите показать и скрыть div, почему бы не использовать прямой jquery «show()» или «hide()»? –

fadeTo() использует непрозрачность и сохраняет исходный максимум элемента. Когда я использую hide(), мои контейнерные мешки вызывают «display: none» удалить placeholder для элемента. – mnlfischer

Я сделал изображение с поддержкой boostrap 3.0.1, и когда я обертываю изображение в div с фиксированной шириной и высотой, мой отзывчивый дизайн больше не реагирует на дизайн. Это вторая причина, по которой я не буду использовать hide(), потому что это будет работать только с div-оболочкой в моем случае. – mnlfischer

Я не уверен, почему fadeTo не работает, но вы можете попробовать animate()

<script type="text/javascript"> 
    $(document).scroll(function() { 
     if ($(this).scrollTop() > 30 && $(this).scrollTop() < 200) { 
      $("#amy").animate({opacity: 1}, "slow"); 
      return; 
     } 
     $("#amy").animate({opacity: 0}, "slow"); 

    }); 
</script>

Кроме того, убедитесь, что нет никакого другого CSS на элементе. Например visibility: hidden; или что-нибудь в этом роде.

источник

2013-11-01 12:55:14 Smeegs

добавлен css. Когда я сделал это простым без пиксельной границы, он работает. if ($ (this) .scrollTop()> 30) работает finde, fadeTo 1 opacity. Но когда я использую между> 30 и <200, непрозрачность 0 не установлена. – mnlfischer

Тогда это, вероятно, что-то связано с условным утверждением и вообще не связано с css. – Smeegs

Я работаю только, когда я использую мое колесо мыши, когда я меняю положение полосы прокрутки вручную, она не будет работать. Thats crazy ... – mnlfischer

JQuery fadeTo() Функция с scrollTop()

ответ

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