CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other
Showing posts with label JqueryUI - Color Animation. Show all posts
Showing posts with label JqueryUI - Color Animation. Show all posts

15 January, 2019

JqueryUI - Color Animation

 Programing Coderfunda     January 15, 2019     JqueryUI, JqueryUI - Color Animation     No comments   

JqueryUI - Color Animation, JqueryUI, 

jQueryUI extends some core jQuery methods so that you can animate different transitions for an element. One of them being animate method. jQueryUI extends the jQuery animate method, to add support for animating colors. You can animate one of several CSS properties that define an element’s colors. Following are the CSS properties that the animate method supports.
  • backgroundColor − Sets the background color of the element.
  • borderTopColor − Sets the color for top side of the element border.
  • borderBottomColor − Sets the color for bottom side of the element border.
  • borderLeftColor − Sets the color for left side of the element border.
  • borderRightColor − Sets the color for right side of the element border.
  • color − Sets the text color of the element.
  • outlineColor − Sets the color for the outline; used to emphasize the element.

Syntax

The following is the syntax of the jQueryUI animate method −
$( "#selector" ).animate(
{ backgroundColor: "black",
color
: "white"
}
);
You can set any number of properties in this method separated by , (comma).

Example

The following example demonstrates the use of addClass() methods.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>jQuery UI addClass Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>
.elemClass {
width
: 200px;
height
: 50px;
background
-color: #b9cd6d;
}
.myClass {
font
-size: 40px; background-color: #ccc; color: white;
}
</style>

<script type = "text/javascript">
$
(document).ready(function() {
$
('#button-1').click(function() {
$
('#animTarget').animate({
backgroundColor
: "black",
color
: "white"
})
})
});
</script>
</head>

<body>
<div id = animTarget class = "elemClass">
Hello!
</div>
<button id = "button-1">Click Me</button>
</body>
</html>
Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

JqueryUI - Color Animation

 Programing Coderfunda     January 15, 2019     JqueryUI, JqueryUI - Color Animation     No comments   

JqueryUI - Color Animation, JqueryUI, 

jQueryUI extends some core jQuery methods so that you can animate different transitions for an element. One of them being animate method. jQueryUI extends the jQuery animate method, to add support for animating colors. You can animate one of several CSS properties that define an element’s colors. Following are the CSS properties that the animate method supports.
  • backgroundColor − Sets the background color of the element.
  • borderTopColor − Sets the color for top side of the element border.
  • borderBottomColor − Sets the color for bottom side of the element border.
  • borderLeftColor − Sets the color for left side of the element border.
  • borderRightColor − Sets the color for right side of the element border.
  • color − Sets the text color of the element.
  • outlineColor − Sets the color for the outline; used to emphasize the element.

Syntax

The following is the syntax of the jQueryUI animate method −
$( "#selector" ).animate(
   { backgroundColor: "black",
      color: "white"
   }
);
You can set any number of properties in this method separated by , (comma).

Example

The following example demonstrates the use of addClass() methods.
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>
      
      <script type = "text/javascript">
         $(document).ready(function() {
            $('#button-1').click(function() {
               $('#animTarget').animate({
                  backgroundColor: "black",
                  color: "white"
               })
            })
         });
      </script>
   </head>
   
   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>
      <button id = "button-1">Click Me</button>
   </body>
</html>
Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Older Posts Home

Meta

Popular Posts

  • Sitaare Zameen Par Full Movie Review
     Here’s a  complete Vue.js tutorial for beginners to master level , structured in a progressive and simple way. It covers all essential topi...
  • Writing and debugging Eloquent queries with Tinkerwell
    In this article, let's look into the options that you can use with Tinkerwell to write and debug Eloquent queries easier. The post Wr...
  • The token request was rejected by the remote server
    error:invalid_granterror_description:The token request was rejected by the remote server.error_uri: https://documentation.openiddict.com/err...
  • Laravel Search String
      Laravel Search String is a package by   Loris Leiva   that generates database queries based on one unique string using a simple and custom...
  • AI foot tracking model
    I am a student doing a graduation project. I urgently need to deal with this model (I am attaching a link). I've never worked with pytho...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (69)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • July (4)
  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

Loading...

Laravel News

Loading...

Copyright © CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda