1

Добрый день. Имею скрипт

    $(document).ready(function() {
        $(window).scroll(function() {
            var top = $(document).scrollTop();
            if (top > 0) {
                $(".header").animate({
                    backgroundColor: '#ffffff'
                }, 1000);
            } else {
                $(".header").animate({
                    backgroundColor: 'none'
                }, 1000);
            }
        });
    });

строка - backgroundColor: 'none' не работает. Какое есть решение?

2
  • Может быть какое то из этих initial, inherit, unset вместо none
    – stackanon
    21 сен 2016 в 7:09
  • К сожалению, ни одно не отменило предыдущее значение фона.
    – igramnet
    21 сен 2016 в 7:15

4 ответа 4

1
   $(document).ready(function() {

   // Сохраним значение фона
   // each нужен, т.к. у элементов может быть разный фон
   $(".header").each(function(){
     var bg = $(this).css('background-color');
     $(this).data('bg', bg);
   });


        $(window).scroll(function() {
            var top = $(document).scrollTop();
            if (top > 0) {
                $(".header").animate({
                    backgroundColor: '#ffffff'
                }, 1000);
            } else {
                $(".header").each(function(){
   // Используем значение фона
                    $(this).animate({
                    backgroundColor: $(this).data('bg');
                   }, 1000);
                });
            }
        });
    });
1

Значение backgoundColor нужно описывать в .css() Пример:

.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" })

Вариант:

$(document).ready(function() {
    $(window).scroll(function() {
        var top = $(document).scrollTop();
        if (top > 0) {
            $(".header").css("backgroundColor", "#ffffff");
        } else {
            $(".header").css("backgroundColor", "none");
        }
    });
});

Более подробное описание представлено здесь.

Добавление к ответу: background-color не может быть изменен через animate(), пока не подключен плагин jQuery.Color

Также можно подключить библиотеку и попытаться воспроизвести таким образом:

Вариант 2:

<!-- include Google's AJAX API loader -->
<script src="http://www.google.com/jsapi"></script>
<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript">
google.load("jqueryui", "1.5.2");
</script>


<script type="text/javascript">
$(document).ready(function() {
    $(window).scroll(function() {
        var top = $(document).scrollTop();
        if (top > 0) {
            $(".header").stop().animate({backgroundColor: '#ffffff'}, 1000);
        } else {
            $(".header").stop().animate({backgroundColor: 'none'}, 1000);
        }
    });
});
</script>
6
  • Ваш вариант не работает. Пробовал прописать и $(".header").css({backgroundColor: '#ffffff'}) $(".header").css({backgroundColor: 'none'})
    – igramnet
    21 сен 2016 в 7:13
  • @ПавелЖуковский подправил ответ, добавил второй вариант
    – Legionary
    21 сен 2016 в 7:17
  • Такой вариант работает. Но нет анимации. Важно, чтобы фон появлялся с элементами анимации.
    – igramnet
    21 сен 2016 в 7:18
  • @ПавелЖуковский минутку, сейчас скорректирую :)
    – Legionary
    21 сен 2016 в 7:19
  • @ПавелЖуковский Добавил информацию к ответу, для использования в animate() background-color - вам нужно установить плагин, это если вы хотите именно через animate()
    – Legionary
    21 сен 2016 в 7:30
1

Решил задачу таким способом

    $(document).ready(function() {
        $(window).scroll(function() {
            var top = $(document).scrollTop();
            if (top > 0) {
                $(".header").addClass('fly', 500);
            } else {
                $(".header").removeClass('fly', 500);
            }
        });
    });
.fly {
    background-color: white;
}

1
  • А тк вы анимацию хотели, добавьте в .fly - transition: background-color .5s 23 сен 2016 в 8:43
0
backgroundColor: 'none' 

заменить на

backgroundColor: 'auto'
1
  • Такой вариант пробовал - не работает.
    – igramnet
    21 сен 2016 в 7:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.