$(‘.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);
Assuming response is HTML then try this: $(response).hide().prependTo(“#be-images ul”).fadeIn(“slow”); When you do it this way: $(‘#be-images ul’).prepend(response).fadeIn(‘slow’); the thing you’re actually fading in is the result of the initial selector (the list at the front), which is already visible.
Question was asked 5 years ago and I was dealing with smooth scroll and felt giving a simple solution is worth it to those who are looking for. All the answers are good but here you go a simple one. function smoothScroll(){ document.querySelector(‘.your_class or #id here’).scrollIntoView({ behavior: ‘smooth’ }); } just call the smoothScroll function … Read more
To rotate a DIV Make use of WebkitTransform / -moz-transform: rotate(Xdeg). This will not work in IE. The Raphael library does work with IE and it does rotation. I believe it uses canvases If you want to animate the rotation, you can use a recursive setTimeout() You could probably even do part of a spin … Read more
You don’t need to use the background animate plugin if you just use separate values like this: $(‘.pop’).animate({ ‘background-position-x’: ‘10%’, ‘background-position-y’: ‘20%’ }, 10000, ‘linear’);
Direct answer Using Edwin Martin’s jQuery plugin for shadow animation, which extends the .animate method, you can simply use the normal syntax with “boxShadow” and every facet of that – color, the x- and y-offset, the blur-radius and spread-radius – gets animated. It includes multiple shadow support. $(element).animate({ boxShadow: “0px 0px 5px 3px hsla(100, 70%, … Read more
CSS-Transforms are not possible to animate with jQuery, yet. You can do something like this: function AnimateRotate(angle) { // caching the object for performance reasons var $elem = $(‘#MyDiv2’); // we use a pseudo object for the animation // (starts from `0` to `angle`), you can name it as you want $({deg: 0}).animate({deg: angle}, { … Read more
You are only scrolling the height of your element. offset() returns the coordinates of an element relative to the document, and top param will give you the element’s distance in pixels along the y-axis: $(“html, body”).animate({ scrollTop: $(‘#title1’).offset().top }, 1000); And you can also add a delay to it: $(“html, body”).delay(2000).animate({scrollTop: $(‘#title1’).offset().top }, 2000);
Save the current height: var curHeight = $(‘#first’).height(); Temporarily switch the height to auto: $(‘#first’).css(‘height’, ‘auto’); Get the auto height: var autoHeight = $(‘#first’).height(); Switch back to curHeight and animate to autoHeight: $(‘#first’).height(curHeight).animate({height: autoHeight}, 1000); And together: var el = $(‘#first’), curHeight = el.height(), autoHeight = el.css(‘height’, ‘auto’).height(); el.height(curHeight).animate({height: autoHeight}, 1000);
To do this, you can set a callback function for the animate command which will execute after the scroll animation has finished. For example: var body = $(“html, body”); body.stop().animate({scrollTop:0}, 500, ‘swing’, function() { alert(“Finished animating”); }); Where that alert code is, you can execute more javascript to add in further animation. Also, the ‘swing’ … Read more