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

时间:2013-10-19 07:48:38

标签: javascript jquery image fade

我正试图淡化图像,但它不起作用。我发现这篇文章: 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和画布内。

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

3 个答案:

答案 0 :(得分:1)

一直使用jQuery

Live Demo

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

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

答案 1 :(得分: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();

Demo

答案 2 :(得分:0)

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

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

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

  1. 创建新的图像对象。
  2. 为要加载的图像创建事件侦听器。
  3. 将图像附加到dom。
  4. 为其不透明度设置动画。 有关进一步说明,请发表评论。
  5. @Rikard - 请为图片加载实施一个事件监听器,然后 ,然后将其设置为用户动画。

    试试这个:

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