смена классов у текста (по времени) на jQuery

Discussion in 'PHP' started by ufaclub, 23 Oct 2010.

  1. ufaclub

    ufaclub New Member

    Joined:
    13 Jul 2010
    Messages:
    204
    Likes Received:
    0
    Reputations:
    0
    тесть сначала выделяется цифра 1 , потом цифра 2,
    потом цифра 3

    через jQuery

    то есть надо задать временное изменение стиля для class

    тесть

    <div class="h1">1</div>

    <div class="h2">2</div>

    <div class="h3">3</div>


    и чтобы через jQuery class h1 менялся на class h1-1 в первую секунду и до 5 секунды.(потом снова на места своя)


    потом класс h2 менялся на класс h2-2 c 5 до 10 секунды
    (потом снова в h2)

    потом класс H3 менялся в класс h3-3 c 10 по 15 секунду.

    и потом снова на 15 секунду становился классом h3

    то есть нужен цикл смена классов без повторения

    :) как такое реализовать на jQuery
     
  2. astrologer

    astrologer Elder - Старейшина

    Joined:
    30 Aug 2007
    Messages:
    837
    Likes Received:
    267
    Reputations:
    59
    Code:
    <!doctype html>
    <html>
    <head>
      <title>periodic className toggling</title>
      <style>
    
    .h1,   .h2,   .h3   { color: black }
    .h1-1, .h2-2, .h3-3 { color: red   }
    
      </style>
      <script>
    
    function selectNode (nodeName, className)
    {
      var
        nodes  = document.getElementsByTagName(nodeName),
        result = [],
    
        i = 0,
        node;
    
      while (node = nodes[i++]) if (node.className == className)
      {
        return node;
      }
    }
    
    window.onload = function ()
    {
      var
        i = 0,
        n = 3,
    
      node = {},
      prev,
    
      timer = setInterval((function swap ()
      {
        node.className = prev;
    
        if (i++ < n)
        {
          node = selectNode('div', 'h' + i);
    
          if (node)
          {
            prev = node.className;
            node.className = 'h' + i + '-' + i;
          }
        }
        else
        {
          clearInterval(timer);
        }
        
        return swap;
      }()), 5000);
    
    };
    
    </script>
    </head>
    <body>
      <div class="h1">1</div>
      <div class="h2">2</div>
      <div class="h3">3</div>
    </body>
    </html>
    По желанию добавить jQ в нужные места.
     
  3. ufaclub

    ufaclub New Member

    Joined:
    13 Jul 2010
    Messages:
    204
    Likes Received:
    0
    Reputations:
    0
    спасибо. :cool:
     
  4. krypt3r

    krypt3r Elder - Старейшина

    Joined:
    27 Apr 2007
    Messages:
    1,507
    Likes Received:
    389
    Reputations:
    101
    Для смены класса в jQuery есть toggleClass()