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过渡执行类似的操作，然后使用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");

DEMO https://jsfiddle.net/ry5qxvos/

Answer 3

你可以很好地使用超时和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 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>

使用backgroundcolor fadein / fadeout突出显示区域

4 个答案: