fadeTo

« Обратно к странице эффектов

[редактировать]

fadeTo( скорость, видимость, [вызов] )

Делает менее видимыми все элементы набора, изменяя прозрачность элементов до величины, указанной в аргументе «видимость».
Для данного типа анимации используется лишь изменение прозрачности, подразумевая, что все совпавшие элементы набора уже имеют какие-то значения высоты и ширины.
Аргументы:
скорость Строка, Число
Строка представляет собой один из трех предустановленных режимов скорости (”slow”, “normal”, или “fast”). В качестве числа указывается значение в миллисекундах (например, 1000).
видимость Число
Значение видимости указывается числом от 0 до 1.
вызов (необязательно) Функция
Функция, которая запускается после окончания анимационных эффектов. Выполняется единожды для каждого элемента.

function callback() {
  this; // dom element
}
Примеры:

Изменяет видимость первого параграфа до значения 0,33 (33%, одна третья от полной видимости), длительность анимационных эффектов — 600 миллисекунд.
    $("p:first").click(function () {
      $(this).fadeTo("slow", 0.33);
    });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("p:first").click(function () {
      $(this).fadeTo("slow", 0.33);
    });

  });
  </script>

</head>

<body>
  <p>
    Click this paragraph to see it fade.
  </p>
  <p>
    Compare to this one that won't fade.
  </p>
</body>

</html>
Случайным образом изменяет прозрачность элемента div, длительность анимационных эффектов — 200 миллисекунд.
    $("div").click(function () {
      $(this).fadeTo("fast", Math.random());
    });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("div").click(function () {
      $(this).fadeTo("fast", Math.random());
    });

  });
  </script>
  <style>

  p { width:80px; margin:0; padding:5px; }
  div { width:40px; height:40px; position:absolute; }
  div#one { top:0; left:0; background:#f00; }
  div#two { top:20px; left:20px; background:#0f0; }
  div#three { top:40px; left:40px; background:#00f; }
  </style>
</head>
<body>
  <p>And this is the library that John built...</p>
  <div id="one"></div>

  <div id="two"></div>
  <div id="three"></div>
</body>
</html>
Найдите правильный ответ! Длительность анимационных эффектов — 250 миллисекунд.
    var getPos = function (n) {
      return (Math.floor(n) * 90) + "px";
    };
    $("p").each(function (n) {
      var r = Math.floor(Math.random() * 3);
      var tmp = $(this).text();
      $(this).text($("p:eq(" + r + ")").text());
      $("p:eq(" + r + ")").text(tmp);
      $(this).css("left", getPos(n));
    });
    $("div").each(function (n) {
                  $(this).css("left", getPos(n));
                })
            .css("cursor", "pointer")
            .click(function () {
                  $(this).fadeTo(250, 0.25, function () {
                        $(this).css("cursor", "")
                               .prev().css({"font-weight": "bolder",
                                            "font-style": "italic"});
                      });
                });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    var getPos = function (n) {
      return (Math.floor(n) * 90) + "px";
    };
    $("p").each(function (n) {
      var r = Math.floor(Math.random() * 3);
      var tmp = $(this).text();
      $(this).text($("p:eq(" + r + ")").text());
      $("p:eq(" + r + ")").text(tmp);
      $(this).css("left", getPos(n));
    });
    $("div").each(function (n) {
                  $(this).css("left", getPos(n));
                })
            .css("cursor", "pointer")
            .click(function () {
                  $(this).fadeTo(250, 0.25, function () {
                        $(this).css("cursor", "")
                               .prev().css({"font-weight": "bolder",
                                            "font-style": "italic"});
                      });
                });

  });
  </script>

  <style>
  div, p { width:80px; height:40px; top:0; margin:0;
           position:absolute; padding-top:8px; }
  p { background:#fcc; text-align:center; }
  div { background:blue; }
  </style>
</head>
<body>
  <p>Wrong</p>
  <div></div>

  <p>Wrong</p>
  <div></div>
  <p>Right!</p>
  <div></div>

</body>
</html>
Name Type
длительность анимационных эффектов — 400 миллисекунд.