Затухание изображения в javascript не работает

Я пытаюсь размыть изображение, но это не работает. Я нашел это сообщение: Javascript постепенное исчезновение изображения И попробовал следующий код, но не повезло :(

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

Но на самом деле ничего не происходит. Я делаю что-то неправильно?

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

РЕДАКТИРОВАТЬ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 и внутри холста.

Но все же большое спасибо людям, которые мне помогли :)


javascript image jquery fade
person Bosiwow    schedule 19.10.2013    source источник
comment
Приведите пример своей проблемы. Вы можете сделать JSFIDDLE - jsfiddle.net   -  person Ishan Jain    schedule 19.10.2013
comment
anImage.fadeIn () невозможно, а также зачем это делать, когда вы пытаетесь выполнить оператор jQuery непосредственно перед ним   -  person mplungjan    schedule 19.10.2013
comment
Если вы ЗНАЕТЕ, насколько неприятно отвечать на вопрос «Покажи мне, как исчезнуть в изображении, которое позже станет« Покажи мне, как исчезать в элементе холста »... В следующий раз расскажи ВСЕ историю»   -  person mplungjan    schedule 19.10.2013
comment
Я предполагаю, что context.globalAlpha= 0%->100% - это псевдокод, но нет смысла увеличивать globalAplpha перед рендерингом.   -  person mplungjan    schedule 19.10.2013

Ответы (3)


arrow_upward
1
arrow_downward

Полностью используйте jQuery

Живая демонстрация

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

function deadScreen(){
  GameOverSound.play();
  $("#deadImg").fadeIn();
}
person mplungjan    schedule 19.10.2013

arrow_upward
0
arrow_downward

Попробуй это:

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

Демонстрация

person Rikard    schedule 19.10.2013
comment
Я отредактировал свой вопрос, не могли бы вы взглянуть и сказать мне, что не так? - person Bosiwow; 19.10.2013
comment
Вы нездорово смешиваете DOM и jQuery - person mplungjan; 19.10.2013
comment
Я пробовал вашу демонстрацию в своем примере, но проблема в том, что исчезающее изображение помещается рядом с моим холстом, а не поверх моего холста. Я хочу, чтобы мертвый экран располагался над холстом и масштабировал мертвый экран под размер моего холста, возможно ли это? - person Bosiwow; 19.10.2013
comment
@mplungjan, что ты подразумеваешь под нездоровым? что лучше использовать просто jQuery или просто ваниль? - person Rikard; 19.10.2013
comment
@ user2815780, вам нужно использовать правильный идентификатор внутри селектора, например: jQuery('#imageID').fadeIn() - person Rikard; 19.10.2013
comment
Использование нового изображения не создает объект jQuery. См. Мой ответ для более чистого решения - person mplungjan; 19.10.2013

arrow_upward
0
arrow_downward

ну, во-первых, ошибка возникает из-за того, что селектор ищет элементы в DOM.

Для лучшего понимания посмотрите на jQuery.com.

во-вторых, если можно, я предоставлю алгоритм того, как этого добиться.

  1. создать новый объект изображения.
  2. создать прослушиватель событий для загрузки изображения.
  3. добавить изображение в дом.
  4. оживите его непрозрачность. для дальнейшего объяснения прокомментируйте.

@Rikard - реализуйте прослушиватель событий для загрузки изображения и только затем анимируйте его для пользователя.

попробуй это:

function deadScreen(){
GameOverSound.play();
jQuery('#deadImg').fadeIn();
}
person JohnnyJS    schedule 19.10.2013
comment
Я отредактировал свой вопрос, не могли бы вы взглянуть и сказать мне, что не так? - person Bosiwow; 19.10.2013
comment
конечно, но, пожалуйста, вставьте все ошибки из журнала консоли (при просмотре Chrome: F12, а затем esc) у вас есть Mac или Windows? - person JohnnyJS; 19.10.2013