animate მეთოდი jQuery-ში

ყველა ის მეთოდი, რომელიც წინა გაკვეთილებზე განვიხილეთ, გარკვეულწილად შეზღუდულია - ისინი აკეთებენ ზუსტად იმას, რისთვისაც შექმნილან. თუ თქვენ გჭირდებათ მეტი კონტროლი ანიმაციაზე - გამოიყენეთ უნივერსალური მეთოდი animate.

პირველ პარამეტრად ეს მეთოდი იღებს ობიექტს, რომელშიც უნდა მიუთითოთ CSS თვისებების ახალი მნიშვნელობები, რომლების ანიმირებაც გსურთ. ხოლო მეორე პარამეტრად - ანიმაციის შესრულების დროს.

მოდით, ეს მეთოდი გავაკეთოთ შემდეგ HTML კოდზე:

html<button id="button">click me</button>
<div id="elem">text...</div>

დავუშვათ, CSS ასე გამოიყურება:

css#elem {
  width: 150px;
  height: 150px;
  padding: 10px;
  border: 1px solid green;
}

მოდით, გავაკეთოთ ისე, რომ ღილაკზე დაჭერისას ელემენტი შემცირდეს შემდეგ ზომებამდე: სიმაღლე - 50px, სიგანე - 100px:

javascript$('#button').click(function() {
  $('#elem').animate({height: 50, width: 100}, 1000);
});

თუ მნიშვნელობა ამ ფორმატში მიუთითებთ height: '+=50', მაშინ ანიმაცია იმუშავებს ასე: სიმაღლის მიმდინარე მნიშვნელობას დაემატება 50px (ჩვენს შემთხვევაში) და ელემენტი ნელ-ნელა ანიმირდება ახალ მნიშვნელობამდე. ვნახოთ მაგალითზე:

javascript$('#button').click(function() {
  $('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

მეთოდ animate-ის შესახებ უფრო დეტალურად იხილეთ jQuery-ს სპრავოჩნიკში.

html<body>
  <div id="block"></div>
</body>

cssdiv {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  cursor: pointer;
  margin-bottom: 20px;
}