I have a javascript function I using jquery and jquery-timing that loops through an ul of images and text changing opacity.
function gridautomate() {
griditem.repeat().each($).find("img").animate({"opacity" : "1"},500, $).wait(7000).wait(noHover).animate({"opacity" : ".5"}, 500, $);
griditem.repeat().each($).find(".quote").animate({"opacity" : "1"},500, $).wait(7000).wait(noHover).animate({"opacity" : "0"}, 500, $);
};
I have another function that changes does the same but on hover.
function gridanimate() {
griditem.hover(
function(){
$(this).find("img").animate({"opacity" : "1"},0);
$(this).find(".quote").animate({"opacity" : "1"},0);
},
function(){
$(this).find("img").animate({"opacity" : ".5"},0);
$(this).find(".quote").animate({"opacity" : "0"},0);
gridautomate();
}
);
}
What I would like to do is toggle starting the 1st function on hover i.e. stop on hover in and start on hover out. Can't figure it out.