jQuery? ???? ??? ?? ?? ??? CSS ??? ????? ???? ???? ??? ?? ?????? ?? ??? ????? ?????.

• animate() ??? ?? CSS ???? ???? ?? ??? ??? ? ?? ??? ?? ??? ?????? ???? ????.
???? ?? ? ?? ??? ??? ???? ???? ?? ??? ?? ?????. ? ?? ??? ?? ??, ?? ?? ? ?????? ??? ? ???? ?? ?? ?????? ??? ?????.
• ???? ?? animate() ???? ?? ?????? ??? ?????? ?? ??? ????? ???? ?? ???? ??? ? ????. ? ??? "??"????? jQuery ?????? ??? ???? ??????.
• jQuery? ?? ?? ???? ?? ?? ????? ???? ??? ?? ? ??? ????????. jQuery? ?? ? CSS? ??? ?????? ?? ? ??? JavaScript ? ??? ? ????. jQuery?? ??? ?? ? ?? ??? ??? ?? ??? ?????? ? ??????. ??? ????? (, animate(properties[, duration][, easing][, callback]), animate(properties[, options]) ?)? ?? ????? ??? ???? ?? ?????? ?????? ?? ??? ?? ??? ??? ?????. ???? ??? ?????. jQuery 's ? ??, ?? jQuery? ?? ?? ? ??? ??? DOM ?? ???? ????? ?? ?????. ? ??? ???? ??? ??? ?? ????? ??? ???? ??? ?? ? ? ????. ?? ???? ????? ?? ?? ? CSS ??? ??? ?? ???????. ????? ?? (????? ??? ?? ???? ????) ???? ???? ?? ?? ?? ?? ?? ? ?? ??? ?? ????, ? ?? ? ????. ????? ? ??? CSS ??? ?? ??? ?? ?? ???? ???? ?????. ? ?? ?? ? (? : 200) ?? ????? ?? ?? ? ????. ?? ?? ?? jQuery? ??? ?? ???? ?????. EM, REM ?? ???? ?? ?? ??? ??? ?? ????. ?? ?? ????? ?? ?? ?? ?? ???? ?? ?? ?? ????? ??
• ? ???????. ?? ??? animate()? ?? ??? ????? ?? ??? ?? ??? ? ?????.
?? ? ?? ??

? ???? ? ?? ?? ??? ???, ???? ?? ??? ?? ????? (???? ???? ??? ??) :

• animate(properties[, duration][, easing][, callback])
• animate(properties[, options]) ?? ??? ?? ? ?? ????
(??) : ????? ?? ?? ???? ?? ?? ? ?? ???.

(?? | ???) : ?? ?? ?? (?? ?) ?? ?? ?? ? ??? ? ?? : "??"(600 ?? ?), "??"(400 ?? ?) ?? "??"(200ms). ???? "??"???.

(??) : ? ????? ??? ????? ? ? ???? ??.
• (??) : ???? ??? ?? ??? ?? ? ?? ???. ?? ??? ??? ??? ????. properties (??) : ?????? ????? ?????? ???? ?? ?? ???? ??.
(??) : ?????? ??? ? ?? ? ??.
• (??) : ?????? ??? ? ?? ? ??? ?????. duration (??? | ??) : ??? ??? ?? ?????.
(???) : ??? ??? ?? ?????.
• (??) : ?????? ?? ? ? ?? ? ??. easing (??) : ?????? ? ?? ?? ???? ??. ? ??? ????? ?? ? ? ?? ?????.
• (Bolean) : ?????? ?? ???? ?? ???? ?? (??? ??? ??). ???? ????. callback (??) : ?? ?? ?? ? ?? ??? CSS ??? ?? ???.
(??) : ?????? ?? ???? ?? ? ??.
• (function) : ? ????? ??? ? ????? ??? ???? ??. options
  • always
  • easy complete?? ??? ??? ??? ???? ??????? ??? ???? ? ?????. ? ???? ??? ? ??? ??? ?? ??? ???? ?? ????? ??? ????.
  • done ?? ??
  ? ?????
  • ? ?? ????? ??? ?? ????. ? ???? ?????? ?? ? ???? ??? ??? ?? ?? ??? ?????? ???? ??? ?? ??????. duration ?? ?????? ?????? ?? ?????? ???? ?? ?? ????. ???? ? ? ??????. ?? ??, ??? ??? ??? ???? ????? ??? ? ????. ? ?????? ???? ?? ??? ?? ??? DIV ??? ?????. ??? ?? Div? ?? ??? ???? ???? ??? ????. ?? ???? ??? ??? ????. html :

    <div class="rectangle">
      <div class="square-small"></div>
    </div>

    <:> css :

    ? ?? ????, ??? ?? ???? ???? ????? ?????.

    <,>? ?????

    .rectangle {
      width: 300px;
      height: 20px;
      display: block;
      position: relative;
      border: 1px solid black;
      margin: 20px 0;
    }
    
    .square-small {
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      background-color: red;
    }

    ??? ????? ? ??? ???? ?????. ??? ????? ?? ??? ?? ?? ??? ??? ?????? (600 ?? ?). ??? ?? ?? ???? ??

    (??? )? ?????. ? ?? ??? ??? CSS ??? ?? ? ???? ??? ???????. ? ???? ????? ??? ???? ?? animate()? ???? ???? ?? ??? (????? ? ?? ??? ???? ??) ??? ???? ?? ). ? ?? ???? ??? ?? ?? ? ?? ? ?? ?? ??? ????

    $('.rectangle')
      .find('.square-small')
      .animate({
        left: 280
      }, 'slow');

    ??? ?? ???? ????.

    ?? ?? ?? ?????? ?????? ??? ?? ?? ?? ???? ?? ?????? ???? ?? ??? ? ???? ?? ? ????. ? ???, ??? ?? ???? ??? ? ?? ???? ??? ????. ? ??? ???? ?? ??? ?????. left ???? ?? <div>? ??? ??? CS? ?? ???? ???? ?? ?? ???? ???? ???????. .square-small ??? ??? ???? ?? ?? ??? ???? ? ?? ??? ?? JavaScript ??? ???? ????. ?? ?? ???? ?? ???? ???? ?? ???? ??? ??? ???? ?? ? ??? ?? ???? ??????????. ?? ???? ??? ???? ?? ????? ???????. ??? ??? ???? ?? ???? ???????. ?? ?? ??? ??? ???? ??? ?? ??? ???????. ? ??? ?? ? ? ??? ?? ?????? ???? ??? ?????. ??? ??? ??? ???? ?? ?????? ?? ???? ??? ??????. ?? ??, ??? ??? ??? ??? ??? 4 ?? <div> ??? ?? ? ? ???? ?? ? ??? ????. ?? ?? ?? ? <div> ?? ? iife? ???? ??? ??? ???? ?????? ?? ??? ? ????. ? ??? ??? ?? ? ??? ??? ????. left ? ???? <?? ??>? ?? ? ? ??? ?? ??? ???? ?? ??? </p> ??? ???? ??? ??????. ?? <?? ??>? ????? ???? ? <pre class='brush:php;toolbar:false;'>left: $('.rectangle').width() - $('.rectangle').find('.square-small').width()</pre> ??? ?????? ??? <h3 id="jQuery-???-??????"> jQuery ??? ??????. </h3>? ?? ?? ?? <?? <?? <h3> <example> ??? ????, ??? </h3> ???? (? ?? ??? ? ?? ?? ??)? <?? ??>, <?? ??> ? <p> ??? ???????. ??? ?????? ???? ?? ???? ?????? ???? ??? ?????? ????. ? ?, ??? ????? ??? ???? ???? ????. ? ???? ? ?? ??? ?????. ??? ???, ??? ???? ???? ?? ??? ?? (??? ??)? ???????. ? ?? ??? ?? ??? ????? <code>options ??? ? ?? ???? ?? ? ??? ???? JavaScript ??? ?? ???? ??? ? ????. ??? ?? ? ?? ?????? ????? ??? ?? ???? ???? ???????. ??? ????? jQuery? start ???? ???? ?????? ?? ??? ?? ??????? ?? ??? ?????? ??????. ?????, ??? ????? ??? ???? ???? ?? complete <<> ?? progress

    ? ?????

    <div class="rectangle">
      <div class="square-small"></div>
    </div>

    jQuery ???? ??? ? ? ??? ?????. ??? ?? ? ?? ??? ?????. ? ????? ? ?? ?? ?????? ?????. ? ???

    ? ???? ??? ?????. ??, ??? ??? ????? ??? ???? ???? ???? ?????? ?? ? ????. prop() progress <<> ?? ?? ?? (FAQ)

    jQuery ????? ??? ???? ??? ??????

    .rectangle {
      width: 300px;
      height: 20px;
      display: block;
      position: relative;
      border: 1px solid black;
      margin: 20px 0;
    }
    
    .square-small {
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      background-color: red;
    }

    jQuery ????? ??? ??? ?? ?????? ?? ??? ??? ?????. ??? CSS ??? ????? ???? ??? ??? ??? ???? ?????. ?? CSS ??? ????? ? ? ??? ?? ? ?? ?? ???? ???? ??? ???????. ????? ??? ???? ?????? ??? ???? ???? ??? ?????? ??? ? ???? ?? ??? ??? ? ????. jQuery ?????? ????? ?? ???? ???

    jQuery? ?????? ???? ??

    ???? ?????. ? ???? ??? ???? ?? ???? ?????? ?????. ?????? ?? ????? jQuery? ?? ??? ???? ?? ??? ?? ? ??????. ??? ????? ????? ????? ?? ??? ???? ???? ?? ? ? ????. animate() jQuery ?????? ???? ?? ??? ? ?? ?? ? ? ??????? animate() ?, jQuery ????? ??? ???? ? ?? ?? CSS ??? ????? ? ? ????.

    ??? ????? ? ?? ??? ???????. ?? ??, ??? ??? ??? ??? ????? ? ? ????.

    jQuery ??????? ?? ??? ??? ??????

    jQuery Animate? ?? ??? ?????? ?? ???? ???? ?? ?????. ? ??? ? ?? ?? ??? ?????. ?? ??? ???? ??? ?????? ???? ?????? ??? ? ? ????.

    ??? ?? CSS ??? jQuery ?????? ??? ? ?????

    ???, jQuery ????? ??? ?? CSS ???? ?????. ???? ???? ?? ? ?? ??? ?????????? ???? ????. ??? jQuery UI ?? jQuery ??? ?? ????? ???? ??? ??? ????? ? ? ????. now jQuery ?????? ???? ?????? ???? ??? ?????? fx ?? ????? ??? ??? ???? jQuery ?????? ??? ? ????. jQuery? ?? ???? ?????? ?????. ??? "??"????? jQuery ?????? ??? ?????.

    jQuery ?????? ???? ???? ??? ?? ? ?????

    ?, jQuery ????? ??? ???? ???? ??? ?? ? ????. ??? ?? ?? ??? ????????? ?? ? ? ????. ??? jQuery?

    ,

    ? ???? ???? ??? ???? ?? ? ???? ????? ? ????.

    ? jQuery ?????? ? ???? ??? ??? ??????

    jQuery ?????? ? ???? ??? ???? ?? ??? ????. ? ?? ??? ?????? ??? ???? ???? ??? ???? ????. ? ?? ???? ????? ?????? ??? ? ??? ???? ???? ????. ?? DOM ?? ?? ????? ??? ?? CSS ??? ???? ??? ???? ? ????.

    ?? ???? jQuery ?????? ??? ? ?????

    ?, ?? ???? jQuery ????? ??? ??? ? ????. ?? ????? jQuery ??? ????? ???? ???? ???? ?? ??? ?????? ?????.

    jQuery ?????? ???? ??? ??? ??? ??? ??????

    ???

    ??? ??????? jQuery ????? ??? ???? ??? ??? ?? ? ????. ??? jQuery? slideDown, slideUp ? slideToggle ???? ???? ??? ??? ??? ???? ????? ? ????.

? ??? jQuery animate () ??? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!