Highlight Bereich mit Hintergrundfarbe Fadein/Fadeout

Question

Hallo ich möchte .small hervorheben. Sie haben keinen Zugriff auf das Hinzufügen von jQuery UI, z. kann .animate nicht verwenden.

HTML

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

jQuery

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

Frage: Wie füge ich Hintergrund-Farbe Orange und machen es .fadeOut() hier? Das unten funktioniert nicht? Ich möchte nur die Hintergrundfarbe ausblenden, sonst nichts.

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

Answer 1

Sie CSS-Animationen verwenden können, das zu tun,

siehe unten

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>

Snippet

Answer 2

Sie können sich auf eine Klasse mit CSS-Übergänge etwas tun und fügen Sie dann oder entferne die Klasse mit 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

Sie Timeouts und CSS-Übergänge gut für diese verwenden können.

Weitere Informationen über Übergänge: 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

versuchen dieses http://jsfiddle.net/x2jrU/92/ Verwendung dieses jquery Hintergrundfarbe der ur Wunsch mit FadeIn/fadeout Option zu machen.

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>