JavaScript DHTML/jQuery/queue — различия между версиями

Материал из Web эксперт
Перейти к: навигация, поиск
м (1 версия)
 
(нет различий)

Текущая версия на 07:24, 26 мая 2010

Queue a custom function.

 

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(document.body).click(function () {
              $("div").show("slow");
              $("div").animate({left:"+=20"},2000);
              $("div").queue(function () {
                $(this).addClass("newcolor");
                $(this).dequeue();
              });
              $("div").animate({left:"-=20"},500);
              $("div").slideUp();
            });

        });
    </script>
<style>
  div { margin:3px; width:50px; position:absolute;
        height:50px; left:10px; top:30px; 
        background-color:yellow; }
  div.red { background-color:red; }
  
</style>
  </head>
  <body>
    <body>
        Click here...
          <div></div>
    </body>
</html>



queue(queue): Replaces the queue of all matched element with this new queue (the array of functions).

 
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(document.body).click(function () {
              $("div").show("slow");
              $("div").animate({left:"+=20"},2000);
              $("div").queue(function () {
                $(this).addClass("newcolor");
                $(this).dequeue();
              });
              $("div").animate({left:"-=20"},500);
              $("div").slideUp();
            });

        });
    </script>
<style>
  div { margin:3px; width:50px; position:absolute;
        height:50px; left:10px; top:30px; 
        background-color:yellow; }
  div.red { background-color:red; }
  
</style>
  </head>
  <body>
    <body>
        Click here...
          <div></div>
    </body>
</html>