Эффект масштабирования и затухания изображения

0

Как я могу щелкнуть изображение с тем же эффектом, что и firefox, загрузить полную зеленую стрелку. т.е. эффект масштабирования и замирания при одном и том же уровне

Любые предложения Спасибо

Теги:

3 ответа

0
Лучший ответ

Вы можете clone элемент, а затем использовать .animate() как

$("img").on("click",function(){
  var new_img = $(this).clone();
  new_img.css({
    "width" : "120px",
    "height" : "120px",
    "top" : $(this).offset().top,
    "left" : $(this).offset().left,
    "position" : "absolute"
  });
  $("body").append(new_img);
  new_img.animate({
    "width" : "40px",
    "height" : "40px",
    "opacity" : "0"
  },1000,function(){new_img.remove();});    
});

FIDDLE

РЕДАКТИРОВАТЬ

Чтобы изменить изображение при завершении анимации, вам нужно добавить 2 строки. От первого до начала функции щелчка

var that = $(this);

От второго до конца анимационной функции обратного вызова

that.attr("src" , "IMG_URL");

ПРОВЕРЬТЕ ОБНОВЛЕНО FIDDLE

  • 0
    и как я могу изменить изображение в конце анимации ..
  • 0
    Проверьте редактирование и обновленную скрипку, пожалуйста
1

В jQuery UI-эффектах есть отдельный эффект, называемый scale().

Просто зайдите на их сайт и получите его!

0

Простым способом сделать как масштаб, так и выцветание будет использование.hide("slow") или.show("slow"). Кроме того, для большего контроля вы можете использовать очередь: false в двух отдельных анимациях.

например

$("#someid").toggle("scale", queue:false);
$("#someid").fadeIn(queue:false);

Ещё вопросы

Сообщество Overcoder
Наверх
Меню