The document ready function reads like this.
$(document).ready(function(){}
Personally I like to place the French braces on separate lines with the function details inside like this:
$(document).ready(function()
{
properties
methods
events
})
Now we will set the properties for the elements using selectors and classes. We will be animating with opacity so we will start of declaring the value of the opacity property for each element using CSS classes and selectors.
$(".class1").css("opacity","0.7");
$("#box1").css("opacity","0.7");
The class one in our example includes a menu link and a corresponding span text. The box is a selector containing 3 images. The original value of the these elements will be default as .07 of a whole value (which is 1).
Our script should look like this:
$(document).ready(function()
{
$(".class1").css("opacity","0.7");
$("#box1").css("opacity","0.7");
}
)
now that we have the initial properties set we will create a function called by the mouse event "mouseenter" inside of the current document ready function. Start the function like this:
$(".class1").mouseenter(function()
{
}
)
this denotes that when mouseenter occurs on a .class1 element call function. Our browser is handling the event with the document ready function, so no event listeners are required. Though there are other jQuery mouse events in the library I find the mouseenter and mouseout are most effective for this use of animate.
So lets declare methods in this function. We will be using the animate method here.
$("#box1").animate({opacity: "1.0", }, 600)
The elements in the box1 selector will be affected by the animate function, and what will be animated is the opacity value to the value of "1", which is gaining value from it's previous value of .07, this will occur with the animate method. We set the time of milliseconds in which the selector will animate, this is 600 milliseconds. The jQuery UI knows what this property will be, and should be placed at the end of the method.
Lets also animate all items in the class1 when we do this hover over a class1 item. If i had more time for this article i would create a separate class for the element that calls the function, then those being affected by it, but unfortunately my time is limited here and I will be occupied for quite awhile after this. I could have compiled the images in box 1 into a class 2 with the span text, but i wanted to illustrate that we can also affect selectors.
Here we animate all items in class 1.
$(".class1").animate({opacity: "1.0", }, 600)
Now both the selector box 1 and all items in class 1 will gain animate opacity to the value of 1 over 600 milliseconds.
We will also create a mouseout function, but first we might want to call the stop method in our current function.
We can rely on the mouseenter and mouseout for our functionality, but a stop method ensures a clean end to the function and this is particularly relevant when we are using the animate method. There are some problems that can occur is you are using animate but are not including the stop method, such as cued events and animations.. which is a consideration in our full example here. Documentation on the stop method is made available at the jQuery site.
.stop().animate({opacity: 1.0}, 1)
this will stop all animations within the function in one millisecond, and we will also include these boolean conditions [ clearQueue ], [ jumpToEnd ] , they should be placed after the opacity property in the animate method. We don't have to state what the booleans are though, as they will be recognized in their position by the jQuery ui. We will be setting them as true, so the method will read as this.
stop().animate({opacity: 1.0},true, true, 1)
Documentation on the Clear que and jumpToEnd conditions can be found here at the official jQuery site. The basic use of these booleans right now is to end the animations appropriately and avoid a barrage of queued animations. Animation will que if you hover in and our of the class very fast and consecutively, or hover between two items with the animate method.
This is how our animate function for mouseenter should look.
$(document).ready(function()
{
$(".class1").css("opacity","0.7");
$("#box1").css("opacity","0.7");
$(".class1").mouseenter(function()
{
$("#box1").animate({opacity: "1.0", }, 600)
$(".class1").animate({opacity: "1.0", }, 600)
stop().animate({opacity: 1.0},true, true, 1)
}
);
}
);
Mouse out will read the same and will also be instantiated in the document ready function and will read much the same as the mouseenter. We will just change the method from mouseenter to mouseout, and we will be changing back the opacity values.
It should read as this.
$(".class1").mouseout(function()
{
$("#box1").animate({opacity: "0.7", }, 600)
$(".class1").animate({opacity: "0.7", }, 600)
stop().animate({opacity: 0.7}, true, true, 1)
});
and the document ready function as a whole
// JavaScript Document
//custom Jquery feature by Cesar
$(document).ready(function(){
$(".class1").css("opacity","0.7");
$("#box1").css("opacity","0.7");
$(".class1").mouseenter(function(){
$("#box1").animate({opacity: "1.0", }, 600)
$(".class1").animate({opacity: "1.0", }, 600)
stop().animate({opacity: 1.0},true, true, 1)
});
$(".class1").mouseout(function(){
$("#box1").animate({opacity: "0.7", }, 600)
$(".class1").animate({opacity: "0.7", }, 600)
stop().animate({opacity: 0.7}, true, true, 1)
});
});
And for a second set of this function, to affect other elements with this effect we will just change selectors and classes. We will need to create a new document ready function for it as well. I don't think you'll need to see that, but i'll show the script as a whole.
// JavaScript Document
//custom Jquery by Cesar
$(document).ready(function(){
$(".class1").css("opacity","0.7");
$("#box1").css("opacity","0.7");
$(".class1").mouseenter(function(){
$("#box1").animate({opacity: "1.0", }, 600)
$(".class1").animate({opacity: "1.0", }, 600)
stop().animate({opacity: 1.0},true, true, 1)
});
$(".class1").mouseout(function(){
$("#box1").animate({opacity: "0.7", }, 600)
$(".class1").animate({opacity: "0.7", }, 600)
stop().animate({opacity: 0.7}, true, true, 1)
});
});
$(document).ready(function(){
$(".class2").css("opacity","0.7");
$("#box2").css("opacity","0.7");
$(".class2").mouseenter(function(){
$("#box2").animate({opacity: "1.0", }, 600)
$(".class2").animate({opacity: "1.0", }, 600)
stop().animate({opacity: 1.0},true, true, 1)
});
$(".class2").mouseout(function(){
$("#box2").animate({opacity: "0.7", }, 600)
$(".class2").animate({opacity: "0.7", }, 600)
stop().animate({opacity: 0.7}, true, true, 1)
});
});
