ここでは、1 つの div 内に 6 つの div (.sticker) があり、そのうちの 1 つをonClickingすると、クリックした部分をその位置に保ちながら他の部分をフェードアウトしたいと思います (そのため、postop /posleft を実行します)。高さと幅が大きくなる大きな div の中央で、非表示の div (.info) が表示されます。閉店も同じ！したがって、このコードは機能していますが、本当にラグがあり、jQuery のようにスムーズではありません。何か間違っているのでしょうか?
すべてのコミュニティに感謝します！
$("body").on('click', '.sticker', function () {
if (!is_open) {
postop = $(this).position().top;
posleft = $(this).position().left;
$('.sticker').not(this).fadeOut(350, function () {
$(".sticker").css("position", "absolute").css("left", posleft + "px").css("top", postop + "px");
$(".sticker").animate({
'top': '0px',
'left': '300px',
'height': '480px',
'width': '750px',
'left': '90px'
}, 350);
$(".sticker").children(".wrap").animate({
'height': '343px',
'width': '750px'
}, 350);
$(".sticker").find(".imgspace").animate({
'height': '343px',
'width': '750px'
}, 350);
$(".sticker").find(".info").animate({
'height': '100px'
}, 350);
$('.arrow-left').animate({
'left': '-20px'
}, 450);
$('.arrow-right').animate({
'left': '880px'
}, 450);
is_open = true;
});
}
if (is_open) {
$(".sticker").children(".wrap").animate({
'height': '193px',
'width': '300px'
}, 350);
$(".sticker").find(".imgspace").animate({
'height': '193px',
'width': '300px'
}, 350);
$(".sticker").find(".info").animate({
'height': '0px'
}, 350);
$(".sticker").animate({
'height': '230px',
'width': '300px',
'top': postop,
'left': posleft
}, 350, function () {
$(".sticker").css("position", "static");
$(".sticker").not(this).fadeIn(300);
is_open = false;
});
}
});