Hey everyone, I'm doing my best to figure out the correct animation for this project. It seems like the issue might be in the JavaScript code, but I'm not entirely sure.
https://i.sstatic.net/4FPd2.jpg
The movie poster should load up in the center, but right now it's loading up in the corner instead.
https://i.sstatic.net/AP1FP.png
When you click on a poster, it should look like this:
https://i.sstatic.net/vfuvu.png
Feel free to check out the codepen link for reference!
var $play = $('.play'),
$detail = $('.detail'),
$movie = $('.movie', $detail),
$close = $('.close');
$('.movies .movie').click(function(){
$movie.html($(this).html());
$play.appendTo($movie);
$poster = $('.poster', this).addClass('active');
console.log("===debug===============");
console.log("top: " + $poster.position().top);
console.log("left: " + $poster.position().left);
console.log("width: " + $poster.width());
console.log("height: " + $poster.height());
$('.poster', $detail).css({
top: $poster.position().top,
left: $poster.position().left,
width: $poster.width(),
height: $poster.height()
}).data({
top: $poster.position().top,
left: $poster.position().left,
width: $poster.width(),
height: $poster.height()
})
$detail.show();
$('.poster', $detail).delay(10).queue(function(next) {
$detail.addClass('ready');
next();
}).delay(100).queue(function(next){
$(this).css({
top: '-10%',
left: '-6%',
width: 266,
height: 400
});
next();
})
})
function close(){
console.log('asd');
$p = $('.detail .poster');
console.log($p)
$p.css({
top: $p.data('top'),
left: $p.data('left'),
width: $p.data('width'),
height: $p.data('height'),
})
$detail.removeClass('ready').delay(500).queue(function(next){
$(this).hide();
$poster.removeClass('active');
next();
});
}
$('body').click(function(e){
$p = $(e.target).parents();
if ($p.is('.app')){
return false;
} else {
close();
}
})
I would really appreciate any assistance with this! Thanks in advance!