We Keep Coding

Flashing text on value change [duplicate]

I'm brand new to jQuery and have some experience using Prototype. In Prototype, there is a method to "flash" an element — ie. briefly highlight it in another color and have it fade back to normal so that the user's eye is drawn to it. Is there such a method in jQuery? I see fadeIn, fadeOut, and animate, but I don't see anything like "flash". Perhaps one of these three can be used with appropriate inputs?

My way is .fadein, .fadeout .fadein, .fadeout ......
$("#someElement").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
function go1() { $("#demo1").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100)}
function go2() { $('#demo2').delay(100).fadeOut().fadeIn('slow') }
#demo1,
#demo2 {
text-align: center;
font-family: Helvetica;
background: IndianRed;
height: 50px;
line-height: 50px;
width: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="go1()">Click Me</button>
<div id='demo1'>My Element</div>
<br>
<button onclick="go2()">Click Me</button> (from comment)
<div id='demo2'>My Element</div>

You can use the jQuery Color plugin.
For example, to draw attention to all the divs on your page, you could use the following code:
$("div").stop().css("background-color", "#FFFF9C")
.animate({ backgroundColor: "#FFFFFF"}, 1500);
Edit - New and improved
The following uses the same technique as above, but it has the added benefits of:
parameterized highlight color and duration
retaining original background color, instead of assuming that it is white
being an extension of jQuery, so you can use it on any object
Extend the jQuery Object:
var notLocked = true;
$.fn.animateHighlight = function(highlightColor, duration) {
var highlightBg = highlightColor || "#FFFF9C";
var animateMs = duration || 1500;
var originalBg = this.css("backgroundColor");
if (notLocked) {
notLocked = false;
this.stop().css("background-color", highlightBg)
.animate({backgroundColor: originalBg}, animateMs);
setTimeout( function() { notLocked = true; }, animateMs);
}
};
Usage example:
$("div").animateHighlight("#dd0000", 1000);

You can use css3 animations to flash an element
.flash {
-moz-animation: flash 1s ease-out;
-moz-animation-iteration-count: 1;
-webkit-animation: flash 1s ease-out;
-webkit-animation-iteration-count: 1;
-ms-animation: flash 1s ease-out;
-ms-animation-iteration-count: 1;
}
#keyframes flash {
0% { background-color: transparent; }
50% { background-color: #fbf8b2; }
100% { background-color: transparent; }
}
#-webkit-keyframes flash {
0% { background-color: transparent; }
50% { background-color: #fbf8b2; }
100% { background-color: transparent; }
}
#-moz-keyframes flash {
0% { background-color: transparent; }
50% { background-color: #fbf8b2; }
100% { background-color: transparent; }
}
#-ms-keyframes flash {
0% { background-color: transparent; }
50% { background-color: #fbf8b2; }
100% { background-color: transparent; }
}
And you jQuery to add the class
jQuery(selector).addClass("flash");

After 5 years... (And no additional plugin needed)
This one "pulses" it to the color you want (e.g. white) by putting a div background color behind it, and then fading the object out and in again.
HTML object (e.g. button):
<div style="background: #fff;">
<input type="submit" class="element" value="Whatever" />
</div>
jQuery (vanilla, no other plugins):
$('.element').fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });
element - class name
first number in fadeTo() - milliseconds for the transition
second number in fadeTo() - opacity of the object after fade/unfade
You may check this out in the lower right corner of this webpage: https://single.majlovesreg.one/v1/
Edit (willsteel) no duplicated selector by using $(this) and tweaked values to acutally perform a flash (as the OP requested).

You could use the highlight effect in jQuery UI to achieve the same, I guess.

If you're using jQueryUI, there is pulsate function in UI/Effects
$("div").click(function () {
$(this).effect("pulsate", { times:3 }, 2000);
});
http://docs.jquery.com/UI/Effects/Pulsate

$('#district').css({opacity: 0});
$('#district').animate({opacity: 1}, 700 );

Pure jQuery solution.
(no jquery-ui/animate/color needed.)
If all you want is that yellow "flash" effect without loading jquery color:
var flash = function(elements) {
var opacity = 100;
var color = "255, 255, 20" // has to be in this format since we use rgba
var interval = setInterval(function() {
opacity -= 3;
if (opacity <= 0) clearInterval(interval);
$(elements).css({background: "rgba("+color+", "+opacity/100+")"});
}, 30)
};
Above script simply does 1s yellow fadeout, perfect for letting the user know the element was was updated or something similar.
Usage:
flash($('#your-element'))

You could use this plugin (put it in a js file and use it via script-tag)
http://plugins.jquery.com/project/color
And then use something like this:
jQuery.fn.flash = function( color, duration )
{
var current = this.css( 'color' );
this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
this.animate( { color: current }, duration / 2 );
}
This adds a 'flash' method to all jQuery objects:
$( '#importantElement' ).flash( '255,0,0', 1000 );

You can extend Desheng Li's method further by allowing an iterations count to do multiple flashes like so:
// Extend jquery with flashing for elements
$.fn.flash = function(duration, iterations) {
duration = duration || 1000; // Default to 1 second
iterations = iterations || 1; // Default to 1 iteration
var iterationDuration = Math.floor(duration / iterations);
for (var i = 0; i < iterations; i++) {
this.fadeOut(iterationDuration).fadeIn(iterationDuration);
}
return this;
}
Then you can call the method with a time and number of flashes:
$("#someElementId").flash(1000, 4); // Flash 4 times over a period of 1 second

How about a really simple answer?
$('selector').fadeTo('fast',0).fadeTo('fast',1).fadeTo('fast',0).fadeTo('fast',1)
Blinks twice...that's all folks!

I can't believe this isn't on this question yet. All you gotta do:
("#someElement").show('highlight',{color: '#C8FB5E'},'fast');
This does exactly what you want it to do, is super easy, works for both show() and hide() methods.

This may be a more up-to-date answer, and is shorter, as things have been consolidated somewhat since this post. Requires jquery-ui-effect-highlight.
$("div").click(function () {
$(this).effect("highlight", {}, 3000);
});
http://docs.jquery.com/UI/Effects/Highlight

function pulse() {
$('.blink').fadeIn(300).fadeOut(500);
}
setInterval(pulse, 1000);

I was looking for a solution to this problem but without relying on jQuery UI.
This is what I came up with and it works for me (no plugins, just Javascript and jQuery);
-- Heres the working fiddle -- http://jsfiddle.net/CriddleCraddle/yYcaY/2/
Set the current CSS parameter in your CSS file as normal css, and create a new class that just handles the parameter to change i.e. background-color, and set it to '!important' to override the default behavior. like this...
.button_flash {
background-color: #8DABFF !important;
}//This is the color to change to.
Then just use the function below and pass in the DOM element as a string, an integer for the number of times you would want the flash to occur, the class you want to change to, and an integer for delay.
Note: If you pass in an even number for the 'times' variable, you will end up with the class you started with, and if you pass an odd number you will end up with the toggled class. Both are useful for different things. I use the 'i' to change the delay time, or they would all fire at the same time and the effect would be lost.
function flashIt(element, times, klass, delay){
for (var i=0; i < times; i++){
setTimeout(function(){
$(element).toggleClass(klass);
}, delay + (300 * i));
};
};
//Then run the following code with either another delay to delay the original start, or
// without another delay. I have provided both options below.
//without a start delay just call
flashIt('.info_status button', 10, 'button_flash', 500)
//with a start delay just call
setTimeout(function(){
flashIt('.info_status button', 10, 'button_flash', 500)
}, 4700);
// Just change the 4700 above to your liking for the start delay. In this case,
//I need about five seconds before the flash started.

Would a pulse effect(offline) JQuery plugin be appropriate for what you are looking for ?
You can add a duration for limiting the pulse effect in time.
As mentioned by J-P in the comments, there is now his updated pulse plugin.
See his GitHub repo. And here is a demo.

Found this many moons later but if anyone cares, it seems like this is a nice way to get something to flash permanently:
$( "#someDiv" ).hide();
setInterval(function(){
$( "#someDiv" ).fadeIn(1000).fadeOut(1000);
},0)

The following codes work for me. Define two fade-in and fade-out functions and put them in each other's callback.
var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);
The following controls the times of flashes:
var count = 3;
var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { if (--count > 0) $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);

If including a library is overkill here is a solution that is guaranteed to work.
$('div').click(function() {
$(this).css('background-color','#FFFFCC');
setTimeout(function() { $(this).fadeOut('slow').fadeIn('slow'); } , 1000);
setTimeout(function() { $(this).css('background-color','#FFFFFF'); } , 1000);
});
Setup event trigger
Set the background color of block element
Inside setTimeout use fadeOut and fadeIn to create a little animation effect.
Inside second setTimeout reset default background color
Tested in a few browsers and it works nicely.

Like fadein / fadeout you could use animate css / delay
$(this).stop(true, true).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100);
Simple and flexible

$("#someElement").fadeTo(3000, 0.3 ).fadeTo(3000, 1).fadeTo(3000, 0.3 ).fadeTo(3000, 1);
3000 is 3 seconds
From opacity 1 it is faded to 0.3, then to 1 and so on.
You can stack more of these.
Only jQuery is needed. :)

There is a workaround for the animate background bug. This gist includes an example of a simple highlight method and its use.
/* BEGIN jquery color */
(function(jQuery){jQuery.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'],function(i,attr){jQuery.fx.step[attr]=function(fx){if(!fx.colorInit){fx.start=getColor(fx.elem,attr);fx.end=getRGB(fx.end);fx.colorInit=true;}
fx.elem.style[attr]="rgb("+[Math.max(Math.min(parseInt((fx.pos*(fx.end[0]-fx.start[0]))+fx.start[0]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[1]-fx.start[1]))+fx.start[1]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[2]-fx.start[2]))+fx.start[2]),255),0)].join(",")+")";}});function getRGB(color){var result;if(color&&color.constructor==Array&&color.length==3)
return color;if(result=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
return[parseInt(result[1]),parseInt(result[2]),parseInt(result[3])];if(result=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
return[parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55];if(result=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
return[parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)];if(result=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
return[parseInt(result[1]+result[1],16),parseInt(result[2]+result[2],16),parseInt(result[3]+result[3],16)];if(result=/rgba\(0, 0, 0, 0\)/.exec(color))
return colors['transparent'];return colors[jQuery.trim(color).toLowerCase()];}
function getColor(elem,attr){var color;do{color=jQuery.curCSS(elem,attr);if(color!=''&&color!='transparent'||jQuery.nodeName(elem,"body"))
break;attr="backgroundColor";}while(elem=elem.parentNode);return getRGB(color);};var colors={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]};})(jQuery);
/* END jquery color */
/* BEGIN highlight */
jQuery(function() {
$.fn.highlight = function(options) {
options = (options) ? options : {start_color:"#ff0",end_color:"#fff",delay:1500};
$(this).each(function() {
$(this).stop().css({"background-color":options.start_color}).animate({"background-color":options.end_color},options.delay);
});
}
});
/* END highlight */
/* BEGIN highlight example */
$(".some-elements").highlight();
/* END highlight example */
https://gist.github.com/1068231

Unfortunately the top answer requires JQuery UI. http://api.jquery.com/animate/
Here is a vanilla JQuery solution
http://jsfiddle.net/EfKBg/
JS
var flash = "<div class='flash'></div>";
$(".hello").prepend(flash);
$('.flash').show().fadeOut('slow');
CSS
.flash {
background-color: yellow;
display: none;
position: absolute;
width: 100%;
height: 100%;
}
HTML
<div class="hello">Hello World!</div>

Here's a slightly improved version of colbeerhey's solution. I added a return statement so that, in true jQuery form, we chain events after calling the animation. I've also added the arguments to clear the queue and jump to the end of an animation.
// Adds a highlight effect
$.fn.animateHighlight = function(highlightColor, duration) {
var highlightBg = highlightColor || "#FFFF9C";
var animateMs = duration || 1500;
this.stop(true,true);
var originalBg = this.css("backgroundColor");
return this.css("background-color", highlightBg).animate({backgroundColor: originalBg}, animateMs);
};

This one will pulsate an element's background color until a mouseover event is triggered
$.fn.pulseNotify = function(color, duration) {
var This = $(this);
console.log(This);
var pulseColor = color || "#337";
var pulseTime = duration || 3000;
var origBg = This.css("background-color");
var stop = false;
This.bind('mouseover.flashPulse', function() {
stop = true;
This.stop();
This.unbind('mouseover.flashPulse');
This.css('background-color', origBg);
})
function loop() {
console.log(This);
if( !stop ) {
This.animate({backgroundColor: pulseColor}, pulseTime/3, function(){
This.animate({backgroundColor: origBg}, (pulseTime/3)*2, 'easeInCirc', loop);
});
}
}
loop();
return This;
}

Put this together from all of the above - an easy solution for flashing an element and return to the original bgcolour...
$.fn.flash = function (highlightColor, duration, iterations) {
var highlightBg = highlightColor || "#FFFF9C";
var animateMs = duration || 1500;
var originalBg = this.css('backgroundColor');
var flashString = 'this';
for (var i = 0; i < iterations; i++) {
flashString = flashString + '.animate({ backgroundColor: highlightBg }, animateMs).animate({ backgroundColor: originalBg }, animateMs)';
}
eval(flashString);
}
Use like this:
$('<some element>').flash('#ffffc0', 1000, 3);
Hope this helps!

Here's a solution that uses a mix of jQuery and CSS3 animations.
http://jsfiddle.net/padfv0u9/2/
Essentially you start by changing the color to your "flash" color, and then use a CSS3 animation to let the color fade out. You need to change the transition duration in order for the initial "flash" to be faster than the fade.
$(element).removeClass("transition-duration-medium");
$(element).addClass("transition-duration-instant");
$(element).addClass("ko-flash");
setTimeout(function () {
$(element).removeClass("transition-duration-instant");
$(element).addClass("transition-duration-medium");
$(element).removeClass("ko-flash");
}, 500);
Where the CSS classes are as follows.
.ko-flash {
background-color: yellow;
}
.transition-duration-instant {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
.transition-duration-medium {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}

just give elem.fadeOut(10).fadeIn(10);

This is generic enough that you can write whatever code you like to animate. You can even decrease the delay from 300ms to 33ms and fade colors, etc.
// Flash linked to hash.
var hash = location.hash.substr(1);
if (hash) {
hash = $("#" + hash);
var color = hash.css("color"), count = 1;
function hashFade () {
if (++count < 7) setTimeout(hashFade, 300);
hash.css("color", count % 2 ? color : "red");
}
hashFade();
}

you can use jquery Pulsate plugin to force to focus the attention on any html element with control over speed and repeatation and color.
JQuery.pulsate() * with Demos
sample initializer:
$(".pulse4").pulsate({speed:2500})
$(".CommandBox button:visible").pulsate({ color: "#f00", speed: 200, reach: 85, repeat: 15 })

Elegant way to animate color change

I have 3 tabs which should have different background and text color. I have created 3 classes in CSS with this styles (collor-pallet-1, 2, 3). I am currently doing this ugly thing which also does not work smoothly. Surely there must be a better way to do this? Thanks
$("#tab1").click(function() {
$(".resp-tab-content").addClass("color-pallet-1");
if ($(".resp-tab-content").hasClass("color-pallet-2")) {
$(".resp-tab-content").removeClass("color-pallet-2", 500);
}
if ($(".resp-tab-content").hasClass("color-pallet-3")) {
$(".resp-tab-content").removeClass("color-pallet-3", 500)
}
$(".tab-background").css("background-color", function() {
return $(".resp-tab-content").css("background-color");
console.log($(".resp-tab-content").css("background-color"));
});
});
$("#tab2").click(function() {
$(".resp-tab-content").addClass("color-pallet-2");
if ($(".resp-tab-content").hasClass("color-pallet-1")) {
$(".resp-tab-content").removeClass("color-pallet-1", 500);
}
if ($(".resp-tab-content").hasClass("color-pallet-3")) {
$(".resp-tab-content").removeClass("color-pallet-3", 500);
}
$(".tab-background").css("background-color", function() {
return $(".resp-tab-content").css("background-color");
console.log($(".resp-tab-content").css("background-color"));
});
});
$("#tab3").click(function() {
$(".resp-tab-content").addClass("color-pallet-3");
if ($(".resp-tab-content").hasClass("color-pallet-2")) {
$(".resp-tab-content").removeClass("color-pallet-2", 500);
}
if ($(".resp-tab-content").hasClass("color-pallet-1")) {
$(".resp-tab-content").removeClass("color-pallet-1", 500);
}
$(".tab-background").css("background-color", function() {
return $(".resp-tab-content").css("background-color");
console.log($(".resp-tab-content").css("background-color"));
});
});

It looks like you are trying to give a time parameter to .removeClass() but when you think about it, an element either has a class or doesn't, there is no transition. Luckily, with CSS3 you don't need javascript to animate colors! To accomplish a smooth transition, give your base class (something like .tab) a rule like transition: background-color 0.5s ease; (with appropriate browser prefixes) and the starting colors. Give your color-palette classes the colors you want to transition to. You can then use some simple javascript to just toggle the color-palette classnames. CSS Tricks has (as usual) a useful article on CSS3 transitions here: http://css-tricks.com/almanac/properties/t/transition/.

Try out this plugin
https://github.com/jquery/jquery-color
Sample code of color animation
jQuery("#go").click(function(){
jQuery("#block").animate({
backgroundColor: "#abcdef"
}, 1500 );
});

Angular.js move animation

I'm having hard time creating a rather simple move animation.
The effect I want to achieve is similar to this http://jsbin.com/vorub/1/edit?output (which I took from some other SO question).
Now I managed to do it using .animation()
Basically doing this
.animation('.move-to-top', [function() {
return {
addClass: function(element, className, done) {
var el = $(element);
var top = el.position().top;
el
.addClass('move-to-top')
.one('transitionend', function() {
setTimeout(function() {
el.css({
transform: 'scale(1.03) translateY(-' + (top+10) + 'px)'
})
.one('transitionend', function() {
setTimeout(function() {
el
.removeClass('move-to-top')
.css({
transform: 'scale(1) translateY(-' + (top) + 'px)'
})
}, 50);
el.prevAll('.timetracking-item')
.css({
transform: 'translateY(' + el.height() + 'px)'
});
});
}, 100);
});
}
}
}]);
where move-to-top class does this
.move-to-top {
#include vendor(transition, all 400ms ease-in-out);
#include vendor(transform, scale(1.03) translateY(-10px));
position: relative;
z-index: 999;
}
What it does is
add class which scales and move item up a bit
move the item to the top using js
move all previous elements that down to make space using js
remove class that added scaling
BUT that's just for the effect and it's done using transforms, which is of course undesirable, so I'd either need to "cleanup" after the transitions are done and remove trasnsforms and actually move the elements in DOM. Or do it completely differently.
Ideal would by orderBy & ng-move combo, but that would require ng-move to have some ng-pre-move, ng-after-move events, which it as far as I know, doesn't.
Or at least if you could use both addClass: fn() and move: fn() where addClass would fire first(while the element is on the old position), but you can't do this either(addClass doesn't fire when orderBy is applied).
The last option I can think about, and like the least, is broadcast some event from my .animation() after all the transitions are done and catch it inside controller, and sort the array then, but I'd need to remove the style attribute from all the items(to remove items) which could and probably will cause flickers.
Any other ideas?

The pre-move is apparently comming in 1.3 https://github.com/angular/angular.js/issues/7609#issuecomment-44615566
For now, what I've done was apply ng-if, which forces angular to re-render the whole list. Works fine.

Javascript slide effect onclick

I'd like to add a slide & fade effect to a DIV, with purely Javascript, using "onclick".
The code is here: http://jsfiddle.net/TCUd5/
The DIV that has to slide has id="pulldown_contents_wrapper".
This DIV is contained in a SPAN, that also triggers it:
<span onclick="toggleUpdatesPulldown(event, this, '4');" style="display: inline-block;" class="updates_pulldown" >
<div class="pulldown_contents_wrapper" id="pulldown_contents_wrapper">
And I think the JS code that controls the SPAN onclick is:
var toggleUpdatesPulldown = function(event, element, user_id) {
if( element.className=='updates_pulldown' ) {
element.className= 'updates_pulldown_active';
showNotifications();
} else {
element.className='updates_pulldown';
}
}
If it is not possible to make it with pure JS, do you have an idea how could I do it with Mootools? (*I'd like to use only pure JS or the Mootols framework).
I have tried to implement the code from: why javascript onclick div slide not working? but with no results.
Thanks a lot.
I have managed to make it with Mootools, but I can't figure it out how to add a slide & fade effect, and a delay on mouseout
window.addEvent('domready', function() {
$('updates_pulldown').addEvents({
mouseenter: function(){
$('updates_pulldown').removeClass('updates_pulldown').addClass('updates_pulldown_active')
$('pulldown_contents_wrapper').set('tween', {
duration: 1000,
physics: 'pow:in:out',
transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
}).show();
},
mouseleave: function(){
$('pulldown_contents_wrapper').set('tween', {
duration: 1000,
delay: 1000,
}).hide();
$('updates_pulldown').removeClass('updates_pulldown_active').addClass('updates_pulldown')
},
});
});
var toggleUpdatesPulldown = function(event, element, user_id) {
showNotifications();
}
Any idea?

jQuery is a lot easier, but with pure javascript you can do it.
In the CSS you'll need to use transitions
#thing { position:relative;
top: 0px;
opacity: 0.8;
-moz-transition: top 1s linear, opacity 1s linear;
-webkit-transition: top 1s linear, opacity 1s linear;
}
then in the javascript when you change the position of the element, it should change via the css transitions.
var toggleUpdatesPulldown = function(event, element, user_id) {
if( element.className=='updates_pulldown' ) {
element.style.top = someValue; //something like '100px' will slide it down 100px
element.style.opacity = '1.0'; //will fade the content in from 0.8 opacity to 1.0
element.className= 'updates_pulldown_active';
showNotifications();
EDIT - provided jQuery code
call the jQuery library, most easily done from the google hosting
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
make the hover function
$(document).ready(function() {
$('.updates_pulldown').hover( //first function is mouseon, second is mouseout
function() {
$(this).animate({top: '50px'}).animate({opacity: '1.0'});
},
function() { //delay 1000 milliseconds, animate both position and opacity
$(this).delay(1000).animate({top: '0px'}).animate({opacity: '0.5'});
}
)
})
the function timing will be the same as whatever you set it to in the css with transition tags. using 'this' instead of the class name again makes sure that the effect only occurs on the specific instance of the class that is hovered over. im not sure if this animation is exactly what you were asking for, but if i understand the question correctly then the main functionality will work for you. just change the numbers and such to fit your needs.

Using CSS3 to make a smooth slow scroll

Basically I have a banner of images which are to scroll from left to right. I have it working fine with jQuery (code pasted below) however it can be very jittery and the client wants it smoother. So after some research the best way is to use CSS3 (probably should have started here). I haven't used much CSS3 other than the basics like border-radius so had to read up. After seeing some examples I was able to try out making the scroll however I couldn't get it to work with jQuery as well.
The intended effect:
scroll slowly from right to left 'forever'
when mouse is over it, it stops scrolling
I do this with the following jQuery:
$(document).ready(function() {
var $scrollMe = $('.ScrollMe');
$scrollMe.hover(stopBannerAnimation)
$scrollMe.mouseout(startBannerAnimation)
function stopBannerAnimation()
{
$(this).stop();
}
function startBannerAnimation()
{
/*if (Modernizr.csstransitions)
{
$scrollMe.css('left', '{xen:calc '{$scrollerWidth} * 100'}px');
}
else*/
{
$scrollMe.animate(
{left: -{$scrollerWidth}},
{xen:calc '{$scrollerWidth} * 60'},
'linear',
function(){
if ($(this).css('left') == '{$scrollerWidth}px')
{
$(this).css('left', 0);
startBannerAnimation();
}
}
);
}
}
startBannerAnimation();
$('.ScrollMe ol').clone().appendTo('.ScrollMe');
});
Can someone help me get this same functionality while using CSS3 to handle the actual scrolling so it is smoother (in theory)?

This is how I'd do it, using 5 seconds for the animation speed:
Step 1: write your CSS3 transition class
.ScrollMe{
-webkit-transition:left 5s ease; // here the animation is set on 5 seconds
-moz-transition:left 5s ease; // adjust to whatever value you want
-o-transition:left 5s ease;
transition:left 5s ease;}
}
Step 2: set up the jquery to toggle the left position
function DoAnimation () {
var $scrollMe = $('.ScrollMe');
if ($scrollMe.offset().left === 0) {
// I imagine you calculate $scrollerWidth elsewhere in your code??
$scrollMe.css('left', $scrollerWidth);
} else {
$scrollMe.css('left', 0);
}
setTimeout(function () {
if (LaunchAnimation === true) { DoAnimation(); }
}, 5000); // here also assuming 5 seconds; change as needed
}
Step 3: control animation start/stop
var LaunchAnimation = true;
$(document).ready(function() {
$('.ScrollMe').mouseover(function () {
//this stops the div from moving
if (LaunchAnimation === true) {
$(this).css('left', $(this).offset().left);
LaunchAnimation = false;
}
});
$('.ScrollMe').mouseleave(function() {
DoAnimation();
LaunchAnimation = true;
});
}
This way, you let the CSS rendering engine of the browser control the speed and movement of the div for smoothness and you use jquery only as the trigger mechanism.
Hope this helps.