background preloader


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 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:

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.

It’s a Rainbow! – Color Changing Text and Backgrounds w/ jQuery Here’s a quick and easy way to cycle between multiple colors smoothly. Normally you would define the (background) color in the CSS and that would be the end of it. In this case we want to be able to adjust colors after the page has loaded, and not just once either – we’re aiming for continuous adjustments. The lovely part about this whole thing is the small about of jQuery required to make it all happen. What You Will Learn How to generate a random RGB color value.The process of animating/looping color changes via the jQuery Color Animations Plugin.Some possible uses for continuous color swapping with backgrounds, texts, and images. Generating Random Color Values This is an important first step as it provides an endless supply of color values to transition to/from with a single line of jQuery. var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; Transitioning Between Colors Completed jQuery Possible Uses

LavaLamp for jQuery lovers! | Ganesh Hover above and feel for yourself, the nifty effect of Lava Lamp. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Just so you know, it weighs just 700 bytes(minified)! Often I have noticed, that the credits are usually granted towards the end. As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. I hope you agree that a typical HTML widget consists of 3 distinct components. A semantically correct HTML markupA CSS to skin the markupAn unobstrusive javascript that gives it a purpose Now lets follow the above steps and implement the LavaLamp menu for your site. Step 1: The HTML Since most UI developers believe that an unordered list(ul) represents the correct semantic structure for a Menu/Navbar, we will start by writing just that. Step 2: The CSS Trust me, this is a simple style sheet. That’s it. Bonus

JavaScript Timing Events Easy Paginate - styled demo Click on the links below to navigate through items Template 01 Pretty cool template Template 02 Pretty cool template Template 03 Pretty cool template Template 04 Pretty cool template Template 05 Pretty cool template Template 06 Pretty cool template Template 07 Pretty cool template Template 08 Pretty cool template Template 09 Pretty cool template Template 10 Pretty cool template Previous1234Next