Animating backgroundPosition does not work as of JQuery 1.5.0. You will have to revert to 1.4.4 if you want it to work. Apparently the fact that it worked in 1.4.4 at all is a coincidence, as “All animated properties should be animated to a single numeric value, except as noted below; most properties that are … Read more
working exemple with starting and ending point here: http://jsfiddle.net/z7E9u/1/ I copy paste basic code here var fadeStart=100 // 100px scroll or less will equiv to 1 opacity ,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity ,fading = $(‘#fading’) ; $(window).bind(‘scroll’, function(){ var offset = $(document).scrollTop() ,opacity=0 ; if( offset<=fadeStart ){ opacity=1; }else … Read more
You can do this with just a few lines of code, like this: function topBar(message) { $(“<div />”, { ‘class’: ‘topbar’, text: message }).hide().prependTo(“body”) .slideDown(‘fast’).delay(10000).slideUp(function() { $(this).remove(); }); } Then just give the class you use some styling, for example: .topbar { background: #990000; border-bottom: solid 2px #EEE; padding: 3px 0; text-align: center; color: white; … Read more
You can break .delay() by .dequeue() function here is example //this is only for make sure that we skip ‘delay’, not other function var inDelay = false; function start() { $(‘.gfx’).animate ({ width: 100 }, function(){inDelay = true}).delay(3000).animate ({ width: 0 }, function(){inDelay = false}) } function breakTheDelay() { if(inDelay) { $(‘.gfx’).dequeue(); } } http://jsfiddle.net/wasikuss/5288z/ … Read more
It seems as though theres a bug with using a percentage with animate. http://bugs.jquery.com/ticket/10669 I would suggest calculating the number of pixels to add yourself, something like this may work: percent = 0.25; add_width = (percent*$(‘#innerBox’).parent().width())+’px’; $(‘#innerBox’).animate({‘width’: ‘+=’+add_width}, 3000);
DEMO 1: the first one, proof of concept $(function() { var pGress = setInterval(function() { var pVal = $(‘#progressbar’).progressbar(‘option’, ‘value’); var pCnt = !isNaN(pVal) ? (pVal + 1) : 1; if (pCnt > 100) { clearInterval(pGress); } else { $(‘#progressbar’).progressbar({value: pCnt}); } },10); }); DEMO 2:: adaptation of @Peter’s response below for the good sake … Read more
$(‘.tooltip’).animate({ opacity: 1, top: “-10px” }, ‘slow’); However, this doesn’t appear to work on display: none elements (as fadeIn does). So, you might need to put this beforehand: $(‘.tooltip’).css(‘display’, ‘block’); $(‘.tooltip’).animate({ opacity: 0 }, 0);
Positioning the background via separate background-position-x/y is a feature that Internet Explorer introduced but never made it into a W3C specification. Any recommendations to add it to the spec have since been denied. See: http://snook.ca/archives/html_and_css/background-position-x-y You can always create your own little plugin, it’s not that hard. Using jQuery 1.8 we now have access to … Read more
You could use when like: $.when($(‘.myElems’).animate({width: 200}, 200)).then(function () { console.log(‘foo’); }); http://jsfiddle.net/tyqZq/ Alternate version: $(‘.myElems’).animate({width: 200}, 200).promise().done(function () { console.log(‘foo’); });
The version above doesn’t work with jQuery 1.6.1. This one does. (function($) { if(!document.defaultView || !document.defaultView.getComputedStyle){ var oldCurCSS = jQuery.curCSS; jQuery.curCSS = function(elem, name, force){ if(name === ‘background-position’){ name=”backgroundPosition”; } if(name !== ‘backgroundPosition’ || !elem.currentStyle || elem.currentStyle[ name ]){ return oldCurCSS.apply(this, arguments); } var style = elem.style; if ( !force && style && style[ name … Read more