Question

如何点击更改图像效果与firefox下载完整的绿色箭头相同。即同一时刻的缩放和褪色效果

任何建议谢谢

Answer 1

在jquery UI效果中有一个名为scale()的单独效果。

转到他们的website并获得它！

Answer 2

同时执行缩放和淡入淡出的简单方法是使用.hide（“slow”）或.show（“slow”）。或者，为了获得更多控制，您可以在两个单独的动画中使用queue：false。

e.g。

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

Answer 3

您可以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行。第1个到点击功能的开头

var that = $(this);

动画回调函数的第二个结束

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

<强> CHECK THE UPDATED FIDDLE

图像缩放和淡入淡出效果

3 个答案: