Jak animować właściwość css scale przy użyciu jquery?

Question

Próbuję mieć div okręgu z klasą "bańki", aby pop po kliknięciu przycisku za pomocą jQuery. Chcę sprawić, by pojawił się z niczego i urósł do pełnego rozmiaru, ale mam problem z uruchomieniem go. Herezje mój kod:

HTML Pokaż bańka ... CSS

.bubble { 
    transform: scale(0); 
} 

JavaScript

$('button').click(function(){ 
    $('.bubble').animate({transform: "scale(1)"}, 5000, 'linear'); 
}); 

Answer 1

można wykonać przejście za pomocą CSS i Javascript następnie wystarczy użyć jako 'switch' która dodaje klasę do rozpoczęcia animacji. Spróbuj tego:

$('button').click(function() { 
 
\t $('.bubble').addClass('animate'); 
 
})

.bubble { 
 
    transform: scale(0); 
 
    width: 250px; 
 
    height: 250px; 
 
    border-radius: 50%; 
 
    background-color: #C00; 
 
    transition: all 5s; 
 
} 
 
.bubble.animate { 
 
    transform: scale(1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<button>Inflate!</button> 
 

 
<div class='col-lg-2 col-md-2 well bubble'></div>

Answer 2

Obecnie nie można używać animate z właściwością see here

Jednak można dodać wartość css transition i modyfikacji samego css transform.

var scale = 1; 
 
setInterval(function(){ 
 
    scale = scale == 1 ? 2 : 1 
 
    $('.circle').css('transform', 'scale('+scale+')') 
 
}, 1000)

.circle { 
 
    margin: 20px auto; 
 
    background-color: blue; 
 
    border-radius: 50%; 
 
    width: 20px; 
 
    height: 20px; 
 
    transform: scale(1); 
 
    transition: transform 250ms ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="circle"></div>

Answer 3

Lepiej iść z CSS3 animacje. Dla animacji przy częstych odstępach można korzystać z prefiksów przeglądarek nośnej (-moz -webkit, itp.) -

@keyframes fullScale{ 
    from{ 
     transform:scale(0); 
    } 
    to{ 
     transform:scale(1); 
    } 
} 
.bubble:hover{ 
    animation: fullScale 5s; 
} 

Patrz ten link- http://www.w3schools.com/css/css3_animations.asp

Or powyższy roztwór przez @Rory jest również dobrym sposobem na dodanie klasy do dołączonego wydarzenia.

Answer 4

Możesz użyć Velocity.js. http://velocityjs.org/ Na przykład:

$("div").velocity({ 
    "opacity" : 0, 
    "scale" : 0.0001 
},1800)