jQuery: Manipulation of the Animation Queue

Posted on by
Reply 


some content



var a = $("#fade");

jQuery fires up each animation in the order that the animations are presented on the page. You can set timers that control when the next animation is fired up, for example, using the delay method. You can also stop an animation after a certain time using the Javascript setTimeout function.

a.fadeOut(1000).delay(1000).fedIn(1000);


//a.stop();


//nothing happens


//Next we can use the Javascript setTimeout function. This function

// will stop the animation after 800 milliseconds.


setTimeout(function(){ a.stop(); }, 800);

Jquery Animation Method

Posted on by
Reply

The jquery animate method:

We will attach the animate method to a div tag with an id of moveme

animate method accepts multiple parameters,
in this case font-size, width, left, etc.
//First we create a variable.




var a = $("#moveme");




//Next, we create an object a.animate:




a.animate ({


     "font-size": "18px",


     "width": "450px",


     "left": "75px",


     "top": "75px"


}, 2000);
Note that the duration of 2000 milliseconds is defined after the object.
This would be a cool effect to add to a nav li object that has an animation when it is clicked.

Jquery: Adding a Function to Toggle CSS on RollOver (Fancy way of saying rollover effect)

Posted on by
Reply

The title sounds scary but this is very simple.

First, make sure you add Jquery to your page.

Next, add opening and closing script tags.

Between the script tags, we will do the following:

In the html markup, you need to create a div with an id of “#maincontent” and will use the bind method to bind the id (#maincontent) to two events: “mousenter mouseleave”, these two events are mouse enter and mouse leave. When the mouse enters, we will apply a different style to the #maincontent id. The new style that we will apply is a background-color: olive. We will call this style .olive
This is the code:

The HTML:

<body>

<div id=”maincontent>

<p>This is some text</p>

</div>

<script>

$(function() {

$(“#maincontent).bind(“mouseenter mouseleave”, function(e) {

$(this).toggleClass(“olive”);
});
});

</script>

</body>

The CSS:

.olive {
background-color: #808000;
}

How to Make Mouse Rollover Effects using Jquery

Posted on by
Reply

The title sounds scary but this is very simple.

So we will select an html id of “#maincontent” and will use the bind method to bind the id (#maincontent) to two events: “mousenter mouseleave”, these two events are mouse enter and mouse leave. When the mouse enters, we will apply a different style to the #maincontent id. The new style that we will apply is a background-color: olive. We will call this style .olive
This is the code:

The HTML:

The CSS:

.olive {
background-color: #808000;
}

Website from Scratch: Flexible vs. Fixed Layout CSS

Posted on by
Reply

In this series, I will write about creating a website from scratch. The first decision we need to make is whether we want to create a website that has a fixed width or a flexible website page that has the ability to adapt to different computer screens. Flexible websites are also called liquid websites. Liquid websites are more difficult and time consuming to develop, especially when they have multiple columns and sidebars.

Here is the basic code that we need to use when dealing with a fixed layout:

So this would be the CSS for a div class “wrap”:
FIXED LAYOUT:

.wrap {
width: 960px;
}

To the contrary, when dealing with a flexible layout, we set the width as a percentage, like so:
FLEXIBLE LAYOUT:

.wrap {
width: 95%;
}

One concept that is very important to understand is that the div is a block container. Once you set the width at less than 100%, you end up with 5% left over. What happens with this left-over 5%? Well, by default, the div of 95% will “float” to the left of the html page. Note that there is no default “centered” setting. The way to center the div in the middle, leaving 2.5% on both the right and the left of the div, is by setting the margins. Here is how you set the margins so the div is centered horizontally:

.wrap {
width: 95%;
margin: 0 auto;
}

The way to read the margin settings that I typed above is: the first number, in this case 0 (zero), represents the top and bottom margins, and the “auto” setting is for the right and left margins, which are set automatically, in this case, they would be set at 2.5% for the left and 2.5% for the right margin.