淡入淡出 JavaScript 中的图像不起作用

Fade in an image in javascript not working

本文关键字：图像 不起作用 淡出 JavaScript 淡入      更新时间：2023-09-26

我试图淡入图像，但它不起作用。我找到了这篇文章：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的，在画布内。

但仍然非常感谢帮助我的人:)

一直使用 jQuery

现场演示 

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

试试这个：

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

演示

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

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

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

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

@Rikard - 请实现用于图像加载的事件侦听器，然后才对用户进行动画处理。

试试这个：

function deadScreen(){
GameOverSound.play();
jQuery('#deadImg').fadeIn();
}
相关文章：