Question

我正试图淡化图像，但它不起作用。我发现这篇文章： Javascript fade image in and out 并尝试了以下代码，但没有运气:(

var anImage= new Image();
anImage.src='images\\anImage.gif'

jQuery(function(){$("anImage").fadeIn()})
anImage.fadeIn()

但是我得到了“Uncaught TypeError：Object＃没有方法'fadeIn'”错误。我一定做错了什么。但我没有看到它：s。请帮忙，

提前致谢

=============================================== =================================== 我的代码现在看起来像这样：

var deadImg=      new Image();
deadImg.src='images/dead.gif'
deadImg.id= 'imageID'
deadImg.style.display = 'none'
jQuery('body').append(deadImg);

我写了一个函数，它应该绘制图像（在画布上淡入它）

function deadScreen(){
GameOverSound.play();
jQuery('#deadImg.id').fadeIn();
}

但实际上并没有发生任何事情。我做错了吗？

=============================================== ===================================

EDIT3：

function deadScreen(){
   GameOverSound.play();


   //increase the context.globalAlpha 0% ->100% and draw image
   context.globalAlpha= 0%->100%
   context.drawImage(deadImg,0,0,canvas.width,canvas.height);


  //at the end make sure nothing is transparant!
  context.globalAlpha=1
}

我可以这样做吗？我认为使用for循环或其他东西来增加透明度从完全透明到不透明。并在每个步骤中重绘图像。或者这不是一个好主意？

=============================================== =============================

谢谢大家的帮助。我通过增加globaltransparancy和重绘图像来解决问题。这是没有jQuery和画布内。

但是仍然非常感谢帮助我的人们：）

Answer 1

一直使用jQuery

Live Demo

$(function() {
  $("<img/>",{"src":"images/anImage.gif","id":"deadImg"})
    .css({"display":"none"})
    .appendTo("body");
});

function deadScreen(){
  GameOverSound.play();
  $("#deadImg").fadeIn();
}

Answer 2

试试这个：

var anImage= new Image();
anImage.src='images//anImage.gif' // you need to use this slash "/", not backslash "\"
anImage.id = 'imageID';
anImage.style.display = 'none';
jQuery('body').append(anImage);
jQuery('#imageID').fadeIn();

Demo

Answer 3

首先，错误被触发，因为DOM上的选择器搜索元素。

查看jQuery.com以便更好地理解。

第二，如果我可以提供一个关于如何实现这一目标的算法。

创建新的图像对象。
为要加载的图像创建事件侦听器。
将图像附加到dom。
为其不透明度设置动画。有关进一步说明，请发表评论。

@Rikard - 请为图片加载实施一个事件监听器，然后，然后将其设置为用户动画。

试试这个：

function deadScreen(){
GameOverSound.play();
jQuery('#deadImg').fadeIn();
}

在javascript中淡入图像无法正常工作

3 个答案: