hover image с помощью jQuery's toggle() не работает в jsfiddle

Question

Вот fiddle для ниже.

Причиной создания этого jsfiddle является то, что animate() не работает внутри функции fadeOut(), но работает вне:

$(".fader").click(function (e) { 
    var self = this; 
    $('.fader').not(self).fadeOut(function() { 
     $(self).animate({top: "220",left: "200"}); // doesn't work 
     LoadContent(fader.attr('id')); // works 
    }); 

    $(this).animate({top: "220", left: "200"}); // works 
}); 

EDIT: хорошо, я вижу почему-то теперь, что одушевленные() не работать - Я вызывал неправильный элемент (вместо self, который исправил jsfiddle). но все же я не знаю, почему toggle() не работает в jsfiddle.

Answer 1

Ваш jsFiddle неправ. Прежде всего, вы не используете библиотеку jQuery, поскольку файл, на который вы ссылаетесь в первой строке, не существует. Во-вторых, вы пытаетесь применить событие click для объекта с классом .fader, но не тот, который был нажат. И нет другого объекта с этим классом. Вместо этого используйте parents(). И функция (как и вызов) «внутри» fadeOut запускается в конце fadeOut, поэтому ваш код выглядит бесполезным.

Если вы хотите, чтобы оживить и FADEOUT в то же время, использовать только анимацию:

$('.fader').animate({ opacity: 0, top: "-1000px", left: "-1000px" }, 'slow');