突出显示背景颜色淡淡的淡水/淡入区域

Question

嗨，我想突出显示 .small。无法访问添加jQuery UI，例如无法使用.animate。

html

<span class="small">10 left</span>

jQuery

$(".small").css("background-color","orange");

问题：如何在此处添加背景色橙色并将其制成.fadeOut()？以下这不起作用？只想淡化背景颜色，别无其他。

$(".small").css("background-color","orange").fadeOut();

Answer 1

您可以使用CSS动画做到这一点

请参阅下面的摘要

span {
  background-color:orange;
  animation-name:bckanim;
  animation-fill-mode:forwards;
  animation-duration:3s;
  animation-delay:0s;
}
@keyframes bckanim {
  0% {background-color:orange;}
  100% { background-color:transparent;}
}

<span class="small">10 left</span>

Answer 2

您可以使用超时，并且可以很好地使用CSS过渡。

有关过渡的更多信息：https://developer.mozilla.org/en-us/docs/web/css/css_transitions/using_css_transitions

$(document).ready(function(){
   var $block = $('.block');
  /** first timeout to make the document do its stuff before this thing runs **/
  window.setTimeout(function() {
  $block.addClass('orange-fade');
     /** second timeout to turn it back to normal **/
     window.setTimeout(function() {
         $block.removeClass('orange-fade');
      },2000);
    
    },1000);
  
  });
  

.block {
  display:block;
  width:200px;
  height:200px;
  background-color:green;
  /** Transitions to give a nice effect **/
  -webkit-transition: background-color 1000ms linear;
  -moz-transition: background-color 1000ms linear;
  -o-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
}
.orange-fade {
     background-color: #AD310B;
     -webkit-transition: background-color 1000ms linear;
     -moz-transition: background-color 1000ms linear;
     -o-transition: background-color 1000ms linear;
     -ms-transition: background-color 1000ms linear;
     transition: background-color 1000ms linear;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" block transition">
   Look at me! Look at you! now look back to me! i'm on a horse!
</div>

Answer 3

您可以在类上的CSS过渡中执行这样的操作，然后用JS添加或删除类。

html：

<span class="small">10 left</span>

CSS：

.small {
  background-color: #fff;
  transition-property: background-color;
  transition-duration: 1s;
  transition-delay: 1s;
}
.orange {
  background-color: orange;
}

JS：

$(".small").addClass("orange");

演示https://jsfiddle.net/ry5qxvos/

Answer 4

尝试此http://jsfiddle.net/x2jru/92/使用此jQuery使用Fadein/fadeout选项来制作您的愿望的背景颜色。

。

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

#target { width: 300px; height: 100px; border: 1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">Highlight Me</div>