jquery-animate

I want to change the background color of 'exampleDiv' from the original white background to when I call the code below to immediate change the background yellow and then fade back to the original white background. $("#exampleDiv").animate({ backgroundColor: "yellow" }, "fast"); However, this code does not work. I have only the JQuery core and JQuery UI linked to my web page. Why doesn't the code above work? matadur I've had varying success with animate , but found that using its built in callback plus jQuery's css seems to work for most cases. Try this function: $(document).ready(function () {

I'm trying to fade the background-color of a span tag using JQuery to emphasize when a change has occured. I was thinking the code would be someting like the following inside the click handler, but I can't seem to get it working. Can you show me where I went wrong? Thanks Russ. $("span").fadeOut("slow").css("background-color").val("FFFF99"); That's better, but now it fades both the background-color of the span tag and the text value of the span tag too. I'm trying to just fade the background-color and leave the text visible. Can that be done? OH, I didn't realize you wanted to fade the color!

I am trying to do the following: On link click: 1.) fade out an img 2.) change the src of the now hidden image 3.) when the img with the new src finishes loading, fade in Minimally, I'd like to see a smooth fade out of one image and a fade in of another (within the same img tag by changing the src) Eventually I'd like to: 1.) fade out an img 2.) show a animated gif "loading image" 3.) change the src of the now hidden image 4.) hide the animated gif "loading image" 5.) when the img with the new src finishes loading, fade in Thanks. This is what I tried so far. It seems to do a couple flashes

Right now I'm using this: $('#go-to-top').each(function(){ $(this).click(function(){ $('html').animate({ scrollTop: 0 }, 'slow'); return true; }); }); which doesn't work in Chrome, and in Opera I get a small flicker: the browser instantly scrolls to the top, then back to the bottom and then it begins to scroll slowly back to top, like it should. Is there a better way to do this? You're returning true from the click function, so it won't prevent the default browser behaviour (i.e. navigating to the go-to-top anchor. As Mark has said, use: $('html,body').animate({ scrollTop: 0 }, 'slow'); So

I am rotating a coin along Y axis by 90deg through CSS. Is there a way so that I can show the thickness of the coin after it have rotated, I thought I can scaleY after the coin have rotated along Y axis but this doesn't seem to work. Please suggest some way to do the same if it is possible. link_on_js fiddle for the same. Please use webkit browsers to open the link. css .coin { display: block; background: url("url-to-image-of-coin.jpg"); background-size: 100% 100%; width: 100px; height: 100px; margin: auto; border-radius: 100%; transition: all 500ms linear; } .flip { transform: rotateY(180deg)

I have a list which I iterate over by using ng-repeat: and the user can interact with thte list items by using up-arrow and down-arrow icons and on click of them i simply change the order of the element in the "list" this is what angular suggests change the model and the changes automatically reflect in the view. <div ng-repeat="item in list"> {{item.name}} <div class="icon-up-arrow" ng-click="moveUp($index);"></div> <div class="icon-down-arrow" ng-click="moveDown($index);"></div> </div> Logic in moveUp:- $scope.moveUp= function(position){ var temp=list[position-1]; list[position-1]=list

I have a 10px bar along the top of the screen that, when clicked, I want it to animate to a height of 40px and then if clicked again, animate back down to 10px. I tried changing the id of the div, but it isn't working. How could I get this to work, or is there a better way to do it? body html: <div id="topbar-show"></div> css: #topbar-show { width: 100%; height: 10px; background-color: #000; } #topbar-hide { width: 100%; height: 40px; background-color: #000; } javascript: $(document).ready(function(){ $("#topbar-show").click(function(){ $(this).animate({height:40},200).attr('id', 'topbar-hide'