使用jQuery從中心顯示和縮放圖像

Question

單擊按鈕后，我希望圖像出現，放大（縮放），縮小，然后消失。 這是我到目前為止所擁有的-它確實是我想要的一部分。 單擊按鈕時，圖像確實會放大/縮小，但這是從左上角而不是我想要的中心進行的。

其次，我希望隱藏圖像，直到單擊該按鈕為止，但這也不起作用。 我嘗試將顯示最初設置為無，然后切換類以更改按鈕單擊時的可見性。 不開心

誰能指出我正確的方向？ 我想念一些小東西嗎？

謝謝您的幫助。

 //Function that centers in viewport jQuery.fn.center = function() { this.css("position", "absolute"); this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px"); this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px"); return this; } //Center $("img").center() //Zoom in / out $("button").on("click", function() { $("img").addClass("visible").center().animate({height: "300px"}, 600).delay(100).animate({height: "100px"},600).removeClass("visible"); }); 

 img { height: 100px; /* display:none; */ } .visible{ display: inline } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button">Click Me!</button> <img src='http://placeholder.pics/svg/300'> 

Answer 1

我認為這應該為您工作。

 //Function that centers in viewport jQuery.fn.center = function() { this.css("position", "absolute"); this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px"); this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px"); return this; } $("img").on('animationend', function(e) { $("img").removeClass("big").css({"display": "none"}); }); //Center $("img").center() //Zoom in / out $("button").on("click", function() { $("img").addClass("big").css({"display": "initial"}); }); 

 img { height: 100px; display: none; } .big { animation-name: example; animation-duration: 1s; } @keyframes example { 0% {transform: scale(1,1);} 50% {transform: scale(2,2);} 100% {transform: scale(1,1);} } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button">Click Me!</button> <img src='http://placeholder.pics/svg/300'> 

Answer 2

這樣可以解決您的問題：

$("button").on("click", function() {
  $("img").addClass("visible").center().animate({height: "300px", margin: "-100px"}, 600).delay(100).animate({height: "100px", margin: "0px"},600).removeClass("visible");
});

如果更改高度，則還應留有余量。 最簡單的方法是計算舊尺寸和新尺寸之間的差異的50％，因此(100 - 300) / 2 = -100

Answer 3

CSS位置會導致這種效果。 您可以重構它並像這樣更改動畫：

 //Function that centers in viewport jQuery.fn.center = function() { this.css("position", "absolute"); this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px"); this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px"); return this; } //Center //$("img").center() //Zoom in / out $("button").on("click", function() { $("img").addClass("visible").animate({'zoom': 1.2 }, 600).delay(100); $("img").addClass("visible").animate({ 'zoom': 1}, 600); }); 

 img { height: 100px; /* display:none; */ } .visible{ display: inline } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button">Click Me!</button> <img src='http://placeholder.pics/svg/300'>