Hiệu ứng mờ dần màu vàng với JQuery

Tôi muốn triển khai một cái gì đó tương tự như hiệu ứng Màu vàng nhạt của 37Signals.

Tôi đang sử dụng Jquery 1.3.2

Mật mã

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

và cuộc gọi tiếp theo hiển thị màu vàng làm mờ dần DOM elment với id hộp .

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

Nhưng nó chỉ làm cho nó có màu vàng. Không có nền trắng sau 15000 mili giây.

Bất kỳ ý tưởng tại sao nó không hoạt động?

Giải pháp

Bạn có thể dùng:

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

Nhưng bạn cần phải bao gồm:

Effects.core.js
Effects.highlight.js

Hàm này là một phần của jQuery Effects.core.js :

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

Như Steerpike chỉ ra trong các ý kiến, effects.core.js và effects.highlight.js cần phải được đưa vào để sử dụng này.

Tôi thích câu trả lời của Sterling Nichols, vì nó nhẹ và không yêu cầu plugin. Tuy nhiên, tôi phát hiện ra nó không hoạt động với các phần tử nổi (chẳng hạn như khi phần tử là "float: right"). Vì vậy, tôi đã viết lại mã để hiển thị phần đánh dấu đúng cách bất kể phần tử được định vị như thế nào trên trang:

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(); });
    });
}

Tùy chọn:
Sử dụng mã sau nếu bạn cũng muốn khớp với bán kính đường viền của phần tử:

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(); });
    });
}

Thư viện hiệu ứng jQuery thêm khá nhiều chi phí không cần thiết vào ứng dụng của bạn. Bạn có thể thực hiện điều tương tự chỉ với 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();

Xác định CSS của bạn như sau:

@-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;
}

Và chỉ cần thêm lớp yftvào bất kỳ mục nào$('.some-item').addClass('yft')

Demo: http://jsfiddle.net/Q8KVC/528/

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

Nên làm thủ thuật. Đặt nó thành màu vàng, sau đó làm mờ nó thành màu trắng

Tôi vừa giải quyết một vấn đề tương tự như thế này trong một dự án mà tôi đang thực hiện. Theo mặc định, chức năng tạo hoạt ảnh không thể tạo hoạt ảnh cho màu sắc. Hãy thử bao gồm Ảnh động màu jQuery .

Tất cả các câu trả lời ở đây đều sử dụng plugin này nhưng không ai đề cập đến nó.

Trên thực tế, tôi có một giải pháp chỉ cần jQuery 1.3x và không cần plugin bổ sung.

Đầu tiên, hãy thêm các chức năng sau vào tập lệnh của bạn

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)
}

Tiếp theo, gọi hàm bằng cách sử dụng:

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

Tôi sẽ để bạn đoán các thông số, chúng khá tự giải thích. Thành thật mà nói, tập lệnh không phải của tôi, tôi đã lấy nó trên một trang sau đó thay đổi nó để nó hoạt động với jQuery mới nhất.

NB: đã thử nghiệm trên firefox 3 và tức là 6 (vâng, nó cũng hoạt động trên cái cũ đó)

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');
              });
}

Dòng this.style.removeAttribute('filter')này dành cho lỗi khử răng cưa trong IE.

Bây giờ, gọi YellowFade từ bất cứ đâu và chuyển bộ chọn của bạn

YellowFade('#myDivId');

Tín dụng : Phil Haack đã có một bản demo cho thấy chính xác cách thực hiện việc này. Anh ấy đang thực hiện một bản demo trên JQuery và ASPNet MVC.

Hãy xem video này

Cập nhật : Bạn đã xem qua video? Quên đề cập đến điều này yêu cầu plugin JQuery.Color

Tôi ghét thêm 23kb chỉ để thêm Effects.core.js và Effects.highlight.js nên tôi đã viết như sau. Nó mô phỏng hành vi bằng cách sử dụng fadeIn (là một phần của chính jQuery) để 'flash' phần tử:

$.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); 
        });
    });
}

sau đó gọi nó bằng $ ('. item'). faderEffect ();

đây là giải pháp của tôi cho vấn đề. nó hoạt động xuất sắc. nó vượt qua xác nhận lỗi jslint và cũng hoạt động tốt trong IE8 và IE9. Tất nhiên, bạn có thể điều chỉnh nó để chấp nhận mã màu và gọi lại:

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});
};

Đây là một tùy chọn không phải jQuery mà bạn có thể sử dụng cho hiệu ứng phai màu. Trong mảng "màu sắc", bạn thêm các màu chuyển tiếp bạn cần từ màu ban đầu cho đến màu cuối cùng. Bạn có thể thêm bao nhiêu màu tùy thích.

   <html lang="en">
   <head>
   <script type="text/javascript">
  //###Face Effect for a text box#######

var targetColor;
var interval1;
var interval2;
var i=0;
var colors = ["#FFFF00","#FFFF33","#FFFF66","#FFFF99","#FFFFCC","#FFFFFF"];

function changeColor(){
    if (i<colors.length){
        document.getElementById("p1").style.backgroundColor=colors[i];
        i++;
    } 
    else{
        window.clearInterval(interval1);
        i=0;
    }
}
addEventListener("load",function(){
    document.getElementById("p1").addEventListener("click",function(e){
        interval1=setInterval("changeColor()",80);              

    })
});
</script>

</head>

<body>
<p id="p1">Click this text box to see the fade effect</p>

<footer>
 <p>By Jefrey Bulla</p>
</footer>
</div>
</body>
</html> 

Nếu bạn muốn thử một kỹ thuật mờ dần màu vàng thay thế không phụ thuộc vào jQuery UI .effect, bạn có thể đặt một div màu vàng (hoặc một màu khác) phía sau nội dung của bạn và sử dụng jQuery .fadeOut ().

http://jsfiddle.net/yFJzn/2/

<div class="yft">
    <div class="content">This is some content</div>
    <div class="yft_fade">&nbsp;</div>
</div>

<style>
  .yft_fade {
      background-color:yellow;
      display:none;
  }
  .content {
      position:absolute;
      top:0px;
  }
</style>

<script>
  $(document).ready(function() {
      $(".yft").click(function() {
          $(this).find(".yft_fade").show().fadeOut();
      });
  });​
</script>

Tôi chỉ đơn giản là sử dụng ...

<style>
tr.highlight {
background: #fffec6;
}
</style>


<script>
//on page load, add class
$(window).load(function() {
$("tr.table-item-id").addClass("highlight", 1200);
}); 

//fade out class
setTimeout(function(){
$("tr.table-item-id").removeClass("highlight", 1200);   
}, 5200);

</script>

Một tập lệnh thô / đơn giản cho "màu vàng nhạt dần", không có plugin nào ngoại trừ chính jquery . Chỉ cần thiết lập nền với rgb (255,255, màu tô sáng) trong bộ hẹn giờ:

<script>

    $(document).ready(function () {
        yellowFadeout();
    });

    function yellowFadeout() {
        if (typeof (yellowFadeout.timer) == "undefined")
            yellowFadeout.timer = setInterval(yellowFadeout, 50);
        if (typeof (yellowFadeout.highlightColor) == "undefined")
            yellowFadeout.highlightColor = 0;
        $(".highlight").css('background', 'rgb(255,255,' + yellowFadeout.highlightColor + ')');
        yellowFadeout.highlightColor += 10;
        if (yellowFadeout.highlightColor >= 255) {
            $(".highlight").css('background','');
            clearInterval(yellowFadeout.timer);
        }
    }
</script>