Good day to all!

There is a sign. The tablet has a class that is equal to something. How to make it so that when the page loads, the class is equal to one value, and after some time it changes to another (I want to change the background smoothly).

The search, of course, rules, and I found something, but, unfortunately, my knowledge is not enough to rewrite it in my own way. Tell me how to be?

ps how I hunt accept acceptance, but after so many trial and error the question has advanced only a little bit.

jQuery UI with Effects Core component installed

    3 answers 3

     <table id="tut"> ... </table> <script> setTimeout(function(){document.getElementById('tut').className += ' newClass';}, 3000); </script>

    After 3 seconds a newClass class will be added to the table. If you need to change the background to the program, it is easier to connect jQuery, jQuery UI and use the animation classes .

    • function worked. the animation for the background worked, and for the function as a whole it failed to use setTimeout (function (). animate ({document.getElementById ('tut'). className + = 'myclass_new';}, 3000); 3000); - Ipun
    • When libraries are connected, the animation starts like this: setTimeout (function () {$ ('# tut'). ToggleClass ('oldClass', 'newClass', 1000);}, 3000); After 3 seconds, the animation will change class changes, which will last 1 second. - ling
    • one
      @ling, the [.toggleClass()](http://api.jquery.com/toggleClass/) parameters are slightly different - Specter
    • jQuery UI with an Effects Core component installed? [ jqueryui.com/download[[1] [1]: jqueryui.com/download - ling
    • established. parasitically, I saw how everything on my page moved to the center, while the proper effect did not happen. I tried online - also nothing jsfiddle.net/A2B8J - Iukpun
     function table(){ $('.one').removeClass('one').addClass('two'); } ​setTimeout(table,2000);​

    Example

    If you need to smooth, you can use .animate

    We connect jQuery UI 1.8.18. We write:

     $('.one').stop().animate({ backgroundColor: "#40B8FE"}, 3000);​

    We look: Example

    Or function table () {$ ('. One'). Stop (). Animate ({backgroundColor: "# 40B8FE"}, 3000);}
    SetTimeout (table, 2000);

    • the code itself is simple and easy to read, but nothing happens when I load it. those. the background is immediately blue there (and it should be with the transition from red to blue). O_o - Ipun
    • one
      once again you go to the example link, I dropped the wrong one first) - shanhaichik
    • It can be like this, but the only thing is that this is updated along with the content. jsfiddle.net/shanhaichik/EF9RH function table () {$ ('. one'). animate ({opacity: 0}, 1000, "linear", function () {$ (this) .css ("background", " #CCCCCC "). Animate ({opacity: 1}, 1000);})} setTimeout (table, 2000); - shanhaichik
    • jsfiddle.net/shanhaichik/6X72Q/1 d here's an option. The main thing is to connect another jQuery UI 1.8.18 library. - shanhaichik
    • one
      everything is super. only the animation is jerking, i.e. it is not jsfiddle.net/6X72Q/6 - Iukpun

    On the page that you link to. everything is written

     $(function(){ // сработает, когда документ загрузится .delay(3000) // пауза в 3 сек а потом смена класа. $("#ид обьекта класс которого меняем").removeClass("myClass noClass").addClass("yourClass"); // удаляет и присваивает класс обьекту });

    The example above shows the class change of the element.

    If it is not clear, then off. manual

    PS can try as an option

     setTimeout(function() { $('#foo').fadeOut(); }, 5000);

    Just replace fadeout in it with assign class and delete

    • one
      What is that? $ (function () {.delay (3000) - Specter