Эффект желтого выцветания с JQuery

Question

Я хотел бы реализовать нечто похожее на эффект 37Signals's Yellow Fade.

Я использую Jquery 1.3.2

Код

(function($) {
   $.fn.yellowFade = function() {
    return (this.css({backgroundColor: "#ffffcc"}).animate(
            {
                backgroundColor: "#ffffff"
            }, 1500));
   }
 })(jQuery);

и следующий вызов показывает желтый цвет исчезает из DOM с box id.

$("#box").yellowFade();

Но это только делает его желтым. Нет белого фона после 15000 миллисекунд.

Есть идеи, почему это не работает?

Решение

Вы можете использовать:

$("#box").effect("highlight", {}, 1500);

Но вам нужно будет включить:

effects.core.js
effects.highlight.js

Answer 1

Эта функция является частью jQuery effect.core.js :

$("#box").effect("highlight", {}, 1500);

Как указал Стирпайк в комментариях, для его использования необходимо включить effect.core.js и effect.highlight.js .

Answer 2

Мне понравился ответ Стерлинга Николса, так как он был легким и не требовал плагинов. Тем не менее, я обнаружил, что он не работает с плавающими элементами (например, когда элемент имеет «float: right»). Поэтому я переписал код для правильного отображения выделения независимо от того, как элемент расположен на странице:

jQuery.fn.highlight = function () {
    $(this).each(function () {
        var el = $(this);
        $("<div/>")
        .width(el.outerWidth())
        .height(el.outerHeight())
        .css({
            "position": "absolute",
            "left": el.offset().left,
            "top": el.offset().top,
            "background-color": "#ffff99",
            "opacity": ".7",
            "z-index": "9999999"
        }).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); });
    });
}

Дополнительно:
Используйте следующий код, если вы также хотите сопоставить border-radius элемента:

jQuery.fn.highlight = function () {
    $(this).each(function () {
        var el = $(this);
        $("<div/>")
        .width(el.outerWidth())
        .height(el.outerHeight())
        .css({
            "position": "absolute",
            "left": el.offset().left,
            "top": el.offset().top,
            "background-color": "#ffff99",
            "opacity": ".7",
            "z-index": "9999999",
            "border-top-left-radius": parseInt(el.css("borderTopLeftRadius"), 10),
            "border-top-right-radius": parseInt(el.css("borderTopRightRadius"), 10),
            "border-bottom-left-radius": parseInt(el.css("borderBottomLeftRadius"), 10),
            "border-bottom-right-radius": parseInt(el.css("borderBottomRightRadius"), 10)
        }).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); });
    });
}

Answer 3

Библиотека эффектов jQuery добавляет ненужные накладные расходы в ваше приложение. Вы можете сделать то же самое только с помощью jQuery. http://jsfiddle.net/x2jrU/92/

jQuery.fn.highlight = function() {
   $(this).each(function() {
        var el = $(this);
        el.before("<div/>")
        el.prev()
            .width(el.width())
            .height(el.height())
            .css({
                "position": "absolute",
                "background-color": "#ffff99",
                "opacity": ".9"   
            })
            .fadeOut(500);
    });
}

$("#target").highlight();

Answer 4

(function($) {
  $.fn.yellowFade = function() {
    this.animate( { backgroundColor: "#ffffcc" }, 1 ).animate( { backgroundColor: "#ffffff" }, 1500 );
  }
})(jQuery);

Должен сделать свое дело. Установите его на желтый, затем исчезните на белый

Answer 5

Определите ваш CSS следующим образом:

@-webkit-keyframes yellowfade {
    from { background: yellow; }
    to { background: transparent; }
}

@-moz-keyframes yellowfade {
    from { background: yellow; }
    to { background: transparent; }
}

.yft {
    -webkit-animation: yellowfade 1.5s;
       -moz-animation: yellowfade 1.5s;
            animation: yellowfade 1.5s;
}

И просто добавьте класс yft к любому предмету $('.some-item').addClass('yft')

Демо: http://jsfiddle.net/Q8KVC/528/

Answer 6

Я только что решил проблему, подобную этой, в проекте, над которым я работал. По умолчанию функция анимации не может анимировать цвета. Попробуйте включить jQuery Color Animations .

Все ответы здесь используют этот плагин, но никто не упоминает его.

Answer 7

На самом деле у меня есть решение, для которого требуется только jQuery 1.3x, и нет дополнительного плагина.

Сначала добавьте следующие функции в ваш скрипт

function easeInOut(minValue,maxValue,totalSteps,actualStep,powr) {
    var delta = maxValue - minValue;
    var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);
    return Math.ceil(stepp)
}

function doBGFade(elem,startRGB,endRGB,finalColor,steps,intervals,powr) {
    if (elem.bgFadeInt) window.clearInterval(elem.bgFadeInt);
    var actStep = 0;
    elem.bgFadeInt = window.setInterval(
        function() {
            elem.css("backgroundColor", "rgb("+
                easeInOut(startRGB[0],endRGB[0],steps,actStep,powr)+","+
                easeInOut(startRGB[1],endRGB[1],steps,actStep,powr)+","+
                easeInOut(startRGB[2],endRGB[2],steps,actStep,powr)+")"
            );
            actStep++;
            if (actStep > steps) {
            elem.css("backgroundColor", finalColor);
            window.clearInterval(elem.bgFadeInt);
            }
        }
        ,intervals)
}

Далее, вызовите функцию, используя это:

doBGFade( $(selector),[245,255,159],[255,255,255],'transparent',75,20,4 );

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

Примечание: протестировано на Firefox 3 и 6 (да, это работает и на этой старой вещи)

Answer 8

это моё решение проблемы. это работает отлично. он проходит проверку ошибок jslint, а также работает достойно в IE8 и IE9. Конечно, вы можете настроить его так, чтобы он принимал коды цветов и обратные вызовы:

jQuery.fn.highlight = function(level) {

  highlightIn = function(options){

    var el = options.el;
    var visible = options.visible !== undefined ? options.visible : true;

    setTimeout(function(){
      if (visible) {
        el.css('background-color', 'rgba('+[255, 64, 64]+','+options.iteration/10+')');
        if (options.iteration/10 < 1) {
          options.iteration += 2;
          highlightIn(options);
        }
      } else {
        el.css('background-color', 'rgba('+[255, 64, 64]+','+options.iteration/10+')');
        if (options.iteration/10 > 0) {
          options.iteration -= 2;
          highlightIn(options);
        } else {
          el.css('background-color', '#fff');
        }
      }
    }, 50);
  };

  highlightOut = function(options) {
    options.visible = false;
    highlightIn(options);
  };

  level = typeof level !== 'undefined' ? level : 'warning';
  highlightIn({'iteration': 1, 'el': $(this), 'color': level});
  highlightOut({'iteration': 10, 'el': $(this), 'color': level});
};

Answer 9

Я терпеть не мог добавлять 23 КБ просто для того, чтобы добавлять эффекты. Он эмулирует поведение, используя fadeIn (которая является частью самого jQuery), чтобы «прошить» элемент:

$.fn.faderEffect = function(options){
    options = jQuery.extend({
        count: 3, // how many times to fadein
        speed: 500, // spped of fadein
        callback: false // call when done
    }, options);

    return this.each(function(){

        // if we're done, do the callback
        if (0 == options.count) 
        {
            if ( $.isFunction(options.callback) ) options.callback.call(this);
            return;
        }

        // hide so we can fade in
        if ( $(this).is(':visible') ) $(this).hide();

        // fade in, and call again
        $(this).fadeIn(options.speed, function(){
            options.count = options.count - 1; // countdown
            $(this).faderEffect(options); 
        });
    });
}

затем вызовите его с помощью $ ('. Item'). FaderEffect ();

Answer 10

function YellowFade(selector){
   $(selector)
      .css('opacity', 0)
      .animate({ backgroundColor: 'Yellow', opacity: 1.0 }, 1000)
      .animate({ backgroundColor: '#ffffff', opacity: 0.0}, 350, function() {
             this.style.removeAttribute('filter');
              });
}

Строка this.style.removeAttribute('filter') предназначена для ошибки сглаживания в IE.

Теперь позвоните в YellowFade откуда угодно и передайте свой селектор

YellowFade('#myDivId');

Кредит : у Фила Хаака было демо, показывающее, как именно это сделать. Он делал демонстрацию по JQuery и ASPNet MVC.

Посмотрите это видео

Обновление : Вы смотрели видео? Забыл упомянуть, что для этого требуется плагин JQuery.Color