jQueryを使用してセンターから画像を拡大/縮小

Question

ボタンをクリックすると、画像が表示され、拡大（拡大）、縮小、消えます。これまで私がこれまで持っていたことは、私が望むものの一部です。ボタンをクリックすると画像が拡大/縮小されますが、私が望む中央ではなく左上隅から画像がズームイン/アウトします。

第2に、ボタンをクリックするまでイメージを非表示にしたいが、それはどちらも機能しない。最初は表示をnoneに設定してから、クラスを切り替えてボタンクリック時の視認性を変更しようとしました。喜びはありません。

誰でも正しい方向に向けることができますか？私はいくつかの小さなものを逃していますか？

ありがとうございました。

//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; 
 
\t /* 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; 
 
\t /* 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'>