removing background color from prepended rows slowly - javascript

I'm adding rows to a pre-existing table with a click of button. To differentiate which rows were added, I add a background color to the added rows. However, I would like to remove this background color after a while or fade it out.
Here is what I'm doing right now:
$("#numlist").prepend("<tr class='newrow'><td>somenum</td></tr>");
How can I fade out the class newrow?
Here is an example as well: http://jsfiddle.net/Nx2nC/

I'd suggest using CSS animations:
#-mozilla-keyframes newRowAdded {
from {
background-color: #ffa;
}
to {
background-color: #fff;
}
}
#-ms-keyframes newRowAdded {
from {
background-color: #ffa;
}
to {
background-color: #fff;
}
}
#-o-keyframes newRowAdded {
from {
background-color: #ffa;
}
to {
background-color: #fff;
}
}
#-webkit-keyframes newRowAdded {
from {
background-color: #ffa;
}
to {
background-color: #fff;
}
}
#keyframes newRowAdded {
/* 'from' is that starting position/frame */
from {
background-color: #ffa;
}
/* 'to' is the final position/frame */
to {
background-color: #fff;
}
}
.newrow {
/* first: the animation-name,
second: the animation duration (s for seconds): */
-moz-animation: newRowAdded 2s;
-ms-animation: newRowAdded 2s;
-o-animation: newRowAdded 2s;
-webkit-animation: newRowAdded 2s;
animation: newRowAdded 2s;
}
JS Fiddle demo.
The, inevitable, down-side of using CSS animations is that older browsers, particularly, but not limited to, Internet Explorer, will be unable to implement this solution. To attend to those incompatible browsers, if you're willing, and able, to implement jQuery UI as well as jQuery itself:
$("#add").click(function (event) {
event.preventDefault();
$("#numlist tbody").prepend("<tr class='newrow'><td>somenum</td></tr>").find('.newrow:first').css('background-color', '#ffa').animate({
'background-color' : '#fff'
}, 2000);
});
JS Fiddle demo.
Note that jQuery itself cannot animate the color or background-color property of an element, jQuery UI, however, can. Though there's an alternate jQuery color plugin that also adds this facility, which may be more lightweight than adding the minimised (and only the relevant modules from) jQuery UI.
References:
'Using CSS animations,' at Mozilla Developer Network's CSS repository.

you can use setTimeout() for removing the class
var $el = $("#numlist").prepend("<tr class='newrow'><td>somenum</td></tr>");
setTimeout(function() { $('.newrow',$el).removeClass('newrow')}, 1000);
and you can use css transition for the fading effect
.newrow {
background-color: red;
transition: background-color 1s linear;
}
tr {
background-color: none;
transition: background-color 1s linear;
}
http://jsfiddle.net/Nx2nC/13/

try this:
$("#add").click(function (e) {
e.preventDefault();
var $tr = $("<tr/>",{"class":"newrow","html":"<td>somenum</td>"}).hide();
$("#numlist").prepend($tr.show("slow"));
setTimeout(function(){
$tr.css("background-color","#fff")
},1500);
});
working fiddle here: http://jsfiddle.net/Nx2nC/9/

Related

How do I make a color-changing background?

So, I know this may be an easy problem to fix, but anyway...
I'm trying to make it where I can change the webpage's background color, in order like below:
red > yellow > green > blue > purple > pink > brown > red
Click here for a demo of a webpage that does what I'm trying to do for my webpage.
I think I can use some JavaScript on the body element:
<html>
<body id="body" bgcolor="#FFFFFF">
<script>
var body = document.getElementById('body'); /* Get
the element with the id of 'body' */
/* I need some javascript to make the 'hex'
variable change accordingly, then call the setColor() with
the parameter as a string for the hex code to change the
background color */
function setColor(hex) {
body.setAttribute("bgcolor", hex); /* Set the
attribute bgcolor to the counter variable */
}
</script>
</body>
</html>
I just need to make it where the hex variable changes in the order like I stated above. I need a for loop, a while loop, or some loop to repeat the process of changing the background color. The setColor() function is there to easily change the color. Does anyone know how to implement this into a webpage? Thanks!
You don't need to use JavaScript to achieve this effect. With CSS animation, you can create your own funky background.
.background gets a property called animation with a name (in this case bg-animation) which loops (and fades) through all kind of colors. You specify the animation itself within #keyframes. The animation time is set to 10 seconds, or 10s and can be anything.
Read more about animation at MDN.
.background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
animation: bg-animation 10s infinite;
}
#-webkit-keyframes bg-animation {
0% {
background-color: red;
}
15% {
background-color: yellow;
}
30% {
background-color: green;
}
45% {
background-color: blue;
}
60% {
background-color: purple;
}
75% {
background-color: pink;
}
90% {
background-color: brown;
}
100% {
background-color: red;
}
}
#keyframes bg-animation {
0% {
background-color: red;
}
15% {
background-color: yellow;
}
30% {
background-color: green;
}
45% {
background-color: blue;
}
60% {
background-color: purple;
}
75% {
background-color: pink;
}
90% {
background-color: brown;
}
100% {
background-color: red;
}
}
<div class="background"></div>
Use setInterval method, generate color randomly within the callback and update the background. You can provide transition while changing the color using CSS transition property. The color code can be generated randomly with help of Math.random, Math.floor and Number#toString method.
In case you want to change between an array of color codes then use an array with a counter variable.
setInterval(function() {
document.body.style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
}, 2000)
body {
background:red;
-webkit-transition: background-color 2000ms linear;
-moz-transition: background-color 2000ms linear;
-o-transition: background-color 2000ms linear;
-ms-transition: background-color 2000ms linear;
transition: background-color 2000ms linear;
}

Make Color of an Element Pulse Continuously With Angular

I am trying to make the color of a button pulse from its current color, say, #ed8c55, to pure white and back to the original color with the entire cycle taking about 2-3 seconds. How could I do that?
In particular, I see that there are a couple of problems here. One is to make the timer and attach some variable's increment to the value of the color. The second problem is the actual color itself. How would one go about continuously changing a hex color towards white and back using a loop of some sort?
I have the following timer implemented that counts seconds. I could easily modify it to count milliseconds or something like that.
var mytimeout = null; // the current timeoutID
$scope.counter = 0;
// actual timer method, counts up every second
$scope.onTimeout = function() {
$scope.counter++;
mytimeout = $timeout($scope.onTimeout, 1000);
};
Any help is appreciated.
I know you want an animation via AngularJS but I dont think thats the right tool for the job as its easily achieved via CSS alone. I'd really advise you to do it like so;
EDIT ------------------
After your comments of dynamically adding a background colour that will then pulse the best way is to inline style the colour via angular and css keyframe the animation.
CSS --
#-webkit-keyframes pulse {
25% { background-color: #FFF; }
}
#-moz-keyframes pulse {
25% { background-color: #FFF; }
}
#-o-keyframes pulse {
25% { background-color: #FFF; }
}
#keyframes pulse {
25% { background-color: #FFF; } // changed to 25% to stop the sudden change to white
}
.element {
transition: background-color 3s;
width: 50px;
height: 50px;
-webkit-animation: pulse 3s infinite; /* Safari 4+ */
-moz-animation: pulse 3s infinite; /* Fx 5+ */
-o-animation: pulse 3s infinite; /* Opera 12+ */
animation: pulse 3s infinite; /* IE 10+, Fx 29+ */
}
HTML -
<div style="background-color: #ed8c55;" class="element"></div>
View my codepen here
/ EDIT ------------------
OG Answer ---
#-webkit-keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
#-moz-keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
#-o-keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
#keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
.element {
width: 50px;
height: 50px;
background: #ed8c55;
-webkit-animation: pulse 3s infinite; /* Safari 4+ */
-moz-animation: pulse 3s infinite; /* Fx 5+ */
-o-animation: pulse 3s infinite; /* Opera 12+ */
animation: pulse 3s infinite; /* IE 10+, Fx 29+ */
}
And that will continuously loop between the two colours.
You can view my code pen on it here.

How do I make a div flash from 0 opacity to 1, continuously without clicking?

It's "Scroll Down" text, and I just need it to smoothly flash back and forth from 0 opacity to 1 the whole time the user is on the page.
Here's the HTML and CSS:
<div class="begin-scroll">SCROLL<br>
<span>TO BEGIN</span>
</div>
.begin-scroll{
font-family:'Charliedontsurf';
font-size:43px;
color:#FFFFFF;
position:absolute;
bottom:20%;
width: 100%;
text-align: center;
line-height:0.7em;
opacity:0;
}
.begin-scroll span{
font-size:34px;
}
This is the code that works for the type of effect I want (minus the continuous flashing):
jQuery(document).ready(function($) {
$('.begin-scroll').delay(3500).fadeTo(1000,1).fadeTo(1000,0).fadeTo(1000,1).fadeTo(1000,0).fadeTo(1000,1);
});
This is the kind of code I want, but the console log was throwing a "too much recursion" error:
jQuery(document).ready(function($) {
$('.begin-scroll').delay(3500).fadeTo(1000,1,pulsatingOut());
function pulsatingOut(){
$('.begin-scroll').fadeTo(1000, 0, pulsatingIn());
}
function pulsatingIn(){
$('.begin-scroll').fadeTo(1000, 1, pulsatingOut());
}
});
I'm not too fond of jQuery, so forgive me if this is a poorly put together and/or dumb question. Oh, and if you want to replace the jQuery altogether with plain 'ol javascript to solve this, please feel free, any solution helps.
Must it be Javascript/jQuery? This can be solved in CSS using animations and keyframes.
#-webkit-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
50% { opacity: 1; }
100% {opacity: 0; }
}
#-moz-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
50% { opacity: 1; }
100% {opacity: 0; }
}
#-o-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
50% { opacity: 1; }
100% {opacity: 0; }
}
#keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
50% { opacity: 1; }
100% {opacity: 0; }
}
#box {
-webkit-animation: NAME-YOUR-ANIMATION 2s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 2s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 2s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 2s infinite; /* IE 10+, Fx 29+ */
}
<div id="box" style="width: 50px; height: 50px; background-color: red;"></div>
Remove the () from your complete parameters in the .fadeTo call. You want to simply pass a reference of that function, not the result.
;(function($){
$(function(){
// store a reference (slight cache improvement)
var $el = $('.begin-scroll');
// declare the functions
function pulsatingOut(){
$el.fadeTo(1000, 0, pulsatingIn);
}
function pulsatingIn(){
$el.fadeTo(1000, 1, pulsatingOut);
}
// call first one and have it loop through
pulsatingIn();
});
})(jQuery);
.begin-scroll { width: 100px; height: 100px; background-color: #f0f; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="begin-scroll"></div>
This is similar to Brad's answer, but a more basic approach.
As Brad said, you will want to pass a callback to the fadeTo method. Callbacks are also known as delegates, function references, etc. As soon as you add the parentheses at the end, you are telling JavaScript to execute that function reference.
Since I had already developed my fiddle while Brad was answering, here's what I came up with. It's not as self-contained, but it works and gives you a simplified idea. I did have to change your text color to black.
jsfiddle: http://jsfiddle.net/o5qgq6LL/1/
function pulsatingIn(){
$(this).fadeIn(1000, pulsatingOut);
}
function pulsatingOut(){
$(this).fadeOut(1000, pulsatingIn);
}
$('.begin-scroll').delay(3500).fadeIn(1000, pulsatingOut);
.begin-scroll{
font-family:sans-serif;
font-size:43px;
color:#000;
position:absolute;
bottom:20%;
width: 100%;
text-align: center;
line-height:0.7em;
display:none;
}
.begin-scroll span{
font-size:34px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="begin-scroll">SCROLL<br>
<span>TO BEGIN</span>
</div>

Blinking a div with background-color in jquery using setInterval

the code :
<div id="divtoBlink" ></div>
css:
#divtoBlink{
width:100px;
height:20px;
background-color:#627BAE;
}
javascript:
setInterval(function(){
$("#divtoBlink").css("background-color","red");
},100)
but nothing is happening can anyone tell me what i am doing wrong ?
fiddle Here
I suggest you don't change the color with javascript. It's better practice to do this via CSS. Changing styles should be done in a stylesheet, not in JS (in case if you want other/more properties changed).
You toggle a class, that class has a background definition (in this example, if you want you can add more properties). A fiddle as DEMO
<div id="divtoBlink" ></div>
.blinker{
background: red;
}
let $div2blink = $("#divtoBlink"); // Save reference for better performance
let backgroundInterval = setInterval(function(){
$div2blink.toggleClass("blinker");
},100)
If you feel like a wild mood, you can add some css3 animation to it
#div2blink{
transition: backgroundColor 0.05s ease-in-out;
}
Made a demo for the animation: DEMO (I slowed it down in the example!)
DEMO
setInterval(function () {
$("#divtoBlink").css("background-color", function () {
this.switch = !this.switch
return this.switch ? "red" : ""
});
}, 100)
.blink-div {
background: green;
animation: flash 2s ease infinite;
}
<div class="blink-div">
Hello World
</div>
Another way to animate a div is by using the css3 animations.
.blink-div {
animation: flash 2s ease infinite;
}
Yet another example, but with much color and speed (based on martijn's example). Seizure warning:
var $div2blink = $("#divtoBlink"); // Save reference, only look this item up once, then save
var color = 0
var color_classes = ["backgroundRed", "backgroundYellow", "backgroundBlue"];
var backgroundInterval = setInterval(function(){
color++;
if (color === 3){
color = 0;
}
$div2blink.toggleClass(color_classes[color]);
},10)
http://jsfiddle.net/LkuNB/1983/
You can also do it with pure CSS:
#divtoBlink{
-webkit-animation: bgblink 3s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
}
#-webkit-keyframes bgblink {
from {background-color: #fff;}
50% {color:#000}
to {background-color: #fff;}
}
#keyframes bgblink {
from {background-color: #fff;}
50% {background-color:#000}
to {background-color: #fff;}
}
Please have a look at below code
HTML:
<div id="divtoBlink" ></div>
CSS:
#divtoBlink{
width:100px;
height:20px;
background-color:#627BAE;
}
.class2{
background-color:#ff0000 !important;
}
JS :
setInterval(function(){
$("#divtoBlink").toggleClass("class2");
},100)
Try this to change the color one time to "red", change background-color to backgroundColor
setInterval(function(){
$("#divtoBlink").css("backgroundColor","red");
},100)
If you want to toggle the class, than you have to do it with .toggle

jQuery Animate() and BackgroundColor

I'm trying to create a simple pulse effect by changing the background color using JQuery. However, I can't get the backgroundColor to animate.
function show_user(dnid) {
/* dnid is HTML ID of a div. */
if (! $(dnid).is(':visible')) {
$(dnid).show()
}
$('html, body').animate({scrollTop: $(dnid).offset().top});
$(dnid).animate({backgroundColor: "#db1a35"}, 1200);
}
What's strange is that this alternate animation works:
$(dnid).animate({opacity: "toggle"}, 1200);
But it's not what I want at all.
Additionally the show() and scroll functionality in the function work fine. It's just the background color animation that doesn't.
The function above is called by this link
Locate Me
Could someone help me animate the background color?
=========
Thanks everyone for the help. Lots of similar answers. Here's what I ended up with
In my header
<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Then in my show_user function right after the scroll animation.
var bgcol = $(dnid).css('backgroundColor');
$(dnid).animate({backgroundColor: "#db1a35"}, 2000);
$(dnid).animate({backgroundColor: bgcol}, 2000);
That gives a relatively quick red "pulse" that will draw the user's eyes.
Again, thanks for the help.
jQuery cannot animate colours by default. In order to animate colours, use the official jQuery.Color plugin.
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used).
Source
jQuery supports animation between any numeric CSS properties, which does not include colors. However, there are other libraries that make animating colors possible. One such library is the aptly-named jQuery Color. Its readme page shows several examples of how to use it to animate between colors using the jQuery .animate() function
Use the CSS animation property and keyframes
See it in action
HTML
<div></div>
CSS
div {
background-color: red;
height: 200px; width: 200px;
-webkit-animation: pulse 1s ease-in 0 infinite normal both;
-moz-animation: pulse 1s ease-in 0 infinite normal both;
-o-animation: pulse 1s ease-in 0 infinite normal both;
animation: pulse 1s ease-in 0 infinite normal both;
}
#-webkit-keyframes pulse {
0% { background-color: red; }
65% { background-color: #7F0093; }
100% { background-color: blue; }
}
#-moz-keyframes pulse {
0% { background-color: red; }
65% { background-color: #7F0093; }
100% { background-color: blue; }
}
#-ms-keyframes pulse {
0% { background-color: red; }
65% { background-color: #7F0093; }
100% { background-color: blue; }
}
#-o-keyframes pulse {
0% { background-color: red; }
65% { background-color: #7F0093; }
100% { background-color: blue; }
}
#keyframes pulse {
0% { background-color: red; }
65% { background-color: #7F0093; }
100% { background-color: blue; }
}
you must first set the background to the from color or it wont do anything 2nd time around.
You also typoed the css property 'background-color' and put it in quotes like i didn't :)
$(dnid).css({'background-color': "#ffffff"});
$(dnid).animate({'background-color': "#db1a35"}, 1200);
Just add this below your jQuery script and you are done:
<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>

Categories