background preloader

.css

.css
Description: Set one or more CSS properties for the set of matched elements. As with the .prop() method, the .css() method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or a single object of key-value pairs. When a number is passed as the value, jQuery will convert it to a string and add px to the end of that string. If the property requires units other than px, convert the value to a string and add the appropriate units before calling the method. When using .css() as a setter, jQuery modifies the element's style property. As of jQuery 1.8, the .css() setter will automatically take care of prefixing the property name. As of jQuery 1.6, .css() accepts relative values similar to .animate(). As of jQuery 1.4, .css() allows us to pass a function as the property value: This example sets the widths of the matched elements to incrementally larger values. Change the color of any paragraph to red on mouseover event. Related:  practice animate tricks

.animate Description: Perform a custom animation of a set of CSS properties. The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a plain object of CSS properties. This object is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive. Animation Properties and Values All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used). In addition to style properties, some non-style properties such as scrollTop and scrollLeft, as well as custom properties, can be animated. Shorthand CSS properties (e.g. font, background, border) are not fully supported. Animated properties can also be relative. Duration Callback Functions Basic Usage Easing Demo:

jQuery for Designers - Tutorials and screencasts HTML5 Boilerplate - A rock-solid default template for HTML5 awesome. jQuery css() Method Things you may not know about jQuery I was going to do a bit of a series, releasing a jQuery tip every day or week or something, but I think I’m a little too lazy to commit to something like that. So I’ve compiled them all into one post! I’ll probably add to the list at later dates so make sure to bookmark it! Do you have a tip nobody knows about? .hover Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements. .hover( handlerIn, handlerOut )Returns: jQuery Description: Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements. version added: 1.0.hover( handlerIn, handlerOut )handlerIn A function to execute when the mouse pointer enters the element.handlerOut A function to execute when the mouse pointer leaves the element. The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element. Calling $( selector ).hover( handlerIn, handlerOut ) is shorthand for: See the discussions for .mouseenter() and .mouseleave() for more details. Example: To add a special style to list items that are being hovered over, try: Demo: Example: To add a special style to table cells that are being hovered over, try:

jQuery 教學 - jQuery Tutorial jQuery 是一套物件導向式簡潔輕量級的 JavaScript Library。透過 jQuery 你可以用最精簡少量的程式碼來輕鬆達到跨瀏覽器 DOM 操作、事件處理、設計頁面元素動態效果、AJAX 互動等。 jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. 摘自: jQuery 的程式碼長怎樣? $("p.neat").addClass("ohmy").show("slow"); Congratulations! 再談談 jQuery 的好 1. 學習 jQuery 之前你最好先了解 在輕鬆的使用jQuery之前,你必需先了解基本的JavaScript、CSS與HTML。 開始 jQuery 先下載 jQuery 接著將此 JS 檔放進您網頁 HTML 的 及 之間... 您也可以透過 Google 載入 jQuery 利用 Google 可以幫您節省點頻寬與存放空間。

HTML5 Canvas For Absolute Beginners – Part 1 Canvas, a HTML5 element that can be used for rendering graphics, animation, graphs, photo compositions or any other visual objects on the fly by using JavaScript. In this tutorial, we will describe how to implement canvas in your web projects. Supported Browsers Before we start our tutorial, let’s check out whether your browser support this latest technology or not. Below is the list of the browsers that officially canvas supported: Internet Explorer (9.0+) Safari (3.0+) Firefox (3.0+) Chrome (3.0+) Opera (10.0+) iOS (1.0+) Android (1.0+) Getting Start Let’s start the tutorial by looking at the <canvas> element itself. The <canvas> element is looks like other HTML elements. So your <canvas> element will be looks like this in your HTML document: < title >HTML5 Canvas For Absolute Beginners | onlyWebPro.com</ title > Sorry, your browser doesn't support canvas technology. The Coordinate System The coordinate system is one of the most important knowledge you need to know before draw on canvas. Final Code

Randomize CSS Properties using jQuery or JavaScript There are times when you’re working on a web development project when you want to randomize a CSS property. The simple act of randomizing a property can give a site a more interactive feel, as long as it’s used subtly. If you start randomizing everything on your site then it’ll lose it’s feel and identity to the user. The last thing you want is your site to feel like a completely different website every time someone visits it. That being said, one popular use of randomizing CSS properties is to randomize a background, whether that’s just a random color being chosen or a random image. The snippets in this article were originally created for that very purpose, randomizing a background. CSS Random Background Color The first example will look at selecting a random background, with one example using vanilla JavaScript and another using jQuery. JavaScript Random Background See the Pen Random Background Color from Array – JavaScript by html5andblog (@html5andblog) on CodePen.

Playing with jQuery Color Plugin and Color Animation jQuery is an easy and useful JavaScript library. If you are someone with basic knowledge of JavaScript you can easily insert jQuery plugins and effects. You do not need to be hardcore coder or developer for that. In this post you will see how to create some cool menus with jQuery and jQuery Color Plugin.View Demo Things you need: 1. 2. First we have is Basic HTML mark up. [sourcecode language="html"] <div id="menu" class="first"> <ul> <li><a href="#"> Home</a></li> <li><a href="#"> About</a></li> <li><a href="#"> Portfolio</a></li> <li><a href="#"> Contact</a></li> [/sourcecode] Do not forget to link the jQuery and color plugin in the header. That’s it. The second menu is basically same. I got the idea for the third and fourth menu idea from David Walsh’s Link color animation post. The third menu first it has a variable where the original background color is is stored. The fourth menus is just experimental. Obviously, there are more modification you can add and play around with settings.

Related:  12/4/19 - 12/4/23