0

我正在尝试淡入图像，但它不起作用。我找到了这篇文章： Javascript淡入淡出图像 并尝试了以下代码，但没有运气:(

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

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

但我收到“未捕获的类型错误：对象 # 没有方法 '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();
}

但实际上什么都没有发生。难道我做错了什么？

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

编辑3：

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 循环或其他东西可以将透明度从完全透明提高到不透明。并且随着每一步，重新绘制图像。或者这不是一个好主意吗？

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

谢谢大家的帮助。我通过增加全局透明度和重绘图像解决了这个问题。这是没有 jQuery 并且在画布内。

但是还是非常感谢帮助过我的人：）

4

3 回答 3

1

一路使用jQuery

Live Demo

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

function deadScreen(){
  GameOverSound.play();
  $("#deadImg").fadeIn();
}
于 2013-10-19T08:22:24.607 回答
0

尝试这个：

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();

演示

于 2013-10-19T07:56:12.527 回答
0

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

查看 jQuery.com 以获得更好的理解。

其次，如果可以的话，我将提供一个关于如何实现这一点的算法。

  1. 创建新的图像对象。
  2. 为要加载的图像创建事件侦听器。
  3. 将图像附加到dom。
  4. 为其不透明度设置动画。如需进一步解释，请发表评论。

@Rikard - 请为图像加载实现一个事件侦听器，然后才将其动画化给用户。

尝试这个：

function deadScreen(){
GameOverSound.play();
jQuery('#deadImg').fadeIn();
}
于 2013-10-19T07:59:29.560 回答