CODEWITHSUNDEEP
jquerycss
user2479785
user2479785

Reputation:

How do you input CSS into an animate

I know about the JQuery:

.animate()

Though I was wondering how to incorporate css into it?

Any ideas?

Upvotes: 0

Views: 47

Answers (4)

Ionică Bizău
Ionică Bizău

Reputation: 113517

From documentation:

.animate( properties [, duration ] [, easing ] [, complete ] )

Description: Perform a custom animation of a set of CSS properties.

$("#block").animate({width: "70%",}, 1500 );
Object with CSS properties ----^      ^--- Milliseconds

Example

<!DOCTYPE html>
<html>
<head>
  <style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <button id="go">&raquo; Run</button>

<div id="block">Hello!</div>
<script>

/* Using multiple unit types within one animation. */

$("#go").click(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});
</script>

</body>
</html>

More information on documentation pages.

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74410

.animate({
    height: 100,
    width: 200,
    marginTop: 50
},duration)

Upvotes: 1

Umair Manzoor
Umair Manzoor

Reputation: 1

use .animate({any css you want to change}) , for ex 

.animate({left:0px})...

this will animate the element to the left, you can also give a time for the transition to take place, like 

.animate({left:0px},200)

where 200 specifies 200 mili seconds

Upvotes: 0

Hive7
Hive7

Reputation: 215

Use .animate({//your css})

Then it should work

Upvotes: 2

Related Questions