jQuery Effect - Animation

jQuery animate() �ິທີການສ້າງການເຄື່ອນຍ້າຍສະບັບຕົວ.

ການສະແດງປະສົມຜົນງານ



jQuery

jQuery ວິທີ animate()

jQuery animate() ວິທີການສ້າງການເຄື່ອນຍ້າຍສະບັບຕົວ.

ຄຳເຫດການ:

$(selector).animate({ຄຳເຫດການທີ່ສາມາດເລືອກຫນັງ.},ຄຳເຫດການຕົກຮຽກຮ້ອງໃຫ້ການສະແດງປະສົມຂອງສິນລະຄວາມ. ມັນສາມາດເລືອກຫນັງນີ້: "slow", "fast" ຫລື ກຳນົດວິນາທີ.,callback,

); ຄຳເຫດການທີ່ສາມາດເລືອກຫນັງ. params

ຄຳເຫດການທີ່ສາມາດເລືອກຫນັງ. ຄຳເຫດການຕົກຮຽກຮ້ອງໃຫ້ການສະແດງປະສົມຂອງສິນລະຄວາມ. ມັນສາມາດເລືອກຫນັງນີ້: "slow", "fast" ຫລື ກຳນົດວິນາທີ. speed

ຄຳເຫດການທີ່ສາມາດເລືອກຫນັງ. callback ຄຳເຫດການ ແມ່ນຊື່ຂອງຫນັງວິທີທີ່ຈະເຮັດຕາມຫລັງການເຄື່ອນຍ້າຍ.

ຕົວຢ່າງດັ່ງກ່າວລາຍງານການຂັດແທນ animate() ວິທີການທີ່ງາຍດາຍ; ມັນສ້າງການເຄື່ອນຍ້າຍ <div> ສູ່ຂ້າງຊ້າຍຈົນກວ່າສິນລະຄວາມ left ເປັນ 250 ຕາມ.

ຄວາມນິຍົມ

$("button").click(function(){
  $("div").animate({left:'250px'});
});

ທ້າທາຍຕອນຕົວເອງ

ຄຳແນະນຳ:ໂດຍປົກກະຕິ, ທຸກສັນດັບ HTML ມີຕັ້ງລິກັນສະຖານະສະໄໝທີ່ຍັງ, ແລະບໍ່ສາມາດເຄື່ອນຍ້າຍໄດ້.

ຖ້າພະຍາຍາມດຳເນີນການຕັ້ງລິກັນ, ຕ້ອງຄວນຮຽກຮ້ອງໃຫ້ສິນລະຄວາມ CSS position ຂອງສັນດັບຫນັງນີ້ເປັນ relative, fixed ຫລື absolute!

jQuery animate() - ຂັດແທນສິນລະຄວາມຫລາຍຫນັງ

ບໍ່ຄວນຫັງວ່າຂະບວນການສ້າງການເຄື່ອນຍ້າຍສາມາດໃຊ້ຫນາມສິນລະຄວາມຫລາຍຫນັງນີ້ທັງໝົດ:

ຄວາມນິຍົມ

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

ທ້າທາຍຕອນຕົວເອງ

ຄຳແນະນຳ:ຈະສາມາດໃຊ້ວິທີ animate() ເພື່ອຂັດແທນທຸກສິນລະຄວາມ CSS ບໍ່?

ມັນແມ່ນໄດ້ສາມາດຢູ່ວ່າຈະພົບ! ແຕ່ຂ້ອຍຕ້ອງຊອກສັງເກດຄຳຖາວອນຫນັງນີ້: ເມື່ອນຳໃຊ້ animate() ຕ້ອງໃຊ້ວິທີການ Camel ເພື່ອຂຽນຊື່ຜະລິດຕົວປະເພດທັງໝົດ, ອີງຕາມ, ຕ້ອງໃຊ້ paddingLeft ທີ່ບໍ່ບໍ່ padding-left, marginRight ທີ່ບໍ່ບໍ່ margin-right, ແລະອີກຫນັງນີ້.

ທັງໆນີ້ ການອອກຮູບພາບສີບໍ່ລວມເປັນສ່ວນຂອງຈີນິກ jQuery ຄວາມກາຍ.

ຖ້າເຈົ້າຕ້ອງການດຳເນີນການອອກຮູບພາບສີ ຕ້ອງລົງໂຫລດ Color Animations Plugin ຈາກ jQuery.com.

jQuery animate() - ນຳໃຊ້ຈຸດນະພາບທີ່ສະເພາະ

ກໍ່ສາມາດກໍານົດຈຸດນະພາບທີ່ສະເພາະ (ຈຸດນະພາບທີ່ຕ້ອງການທີ່ຕາມຄຸນສົມບັດກັບຈຸດນະພາບທີ່ປະຈຸບັນຂອງສິ່ງ). ຕ້ອງກໍ່ຕ້ອງສະເໜີຈຸດນະພາບທີ່ຕ້ອງການກ່ອນຈຸດນະພາບຂອງສິ່ງດັ່ງກ່າວດ້ວຍ += ຫຼື -=:

ຄວາມນິຍົມ

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

ທ້າທາຍຕອນຕົວເອງ

jQuery animate() - ນຳໃຊ້ຈຸດນະພາບການຕີມ

ທ້າທາຍຂອງຈຸດນະພາບສະຖານທີ່ຈະສາມາດຈະຕີມວ່າ "show"、"hide" ຫຼື "toggle":

ຄວາມນິຍົມ

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

ທ້າທາຍຕອນຕົວເອງ

jQuery animate() - ນຳໃຊ້ພາກສ່ວນການຈັດຄວາມລະບົບ

ໂດຍກົດໝາຍ jQuery ມີພາກສ່ວນການຈັດຄວາມລະບົບສຳລັບການອອກຮູບພາບ.

ນີ້ໝາຍຄວາມວ່າຖ້າເຈົ້າໄດ້ຂຽນຫຼາຍການເອິ້ນ animate() ຕໍ່ຫນັງກັນຫນັງກັນ ຈີນິກຢູບຈະສ້າງຄູ່ມືຂອງ "ທີ່ຢູ່ພາຍໃນ" ທີ່ກວມມີການເອິ້ນພາກສ່ວນການນີ້. ແລະຈະດຳເນີນການເອິ້ນ animate() ຕໍ່ຫນັງກັນ.

ຄວາມນິຍົມ 1

ປິດລົງຖ້າເຈົ້າຕ້ອງການດຳເນີນການອອກຮູບພາບທີ່ຫຼາຍກວ່າຫນັງກັນຈາກກັນ ພວກເຮົາຕ້ອງໃຊ້ພາກສ່ວນການຈັດຄວາມລະບົບ:

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

ທ້າທາຍຕອນຕົວເອງ

ຄວາມນິຍົມ 2

ບົດສະຫຼຸບນີ້ຈະປ່ຽນ <div> ສະຖານທີ່ໄປທາງຂວາ ແລະເພີ່ມຂະໜາດຂອງຂໍ້ຄວາມ:

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

ທ້າທາຍຕອນຕົວເອງ