How to get these two functions to work together?
I have two different JQuery functions that both work independently, but I am curious how to get them to work together.
I have a row of images, and I am using JQuery to have them fade in and out on rollover.
- $(document).ready(function(){
//Set opacity on each span to 0%
$(".rollover").css({'opacity':'0'});
$('.img_list a').hover(
function() {
$(this).find('.rollover').stop().fadeTo(500, 1);
},
function() {
$(this).find('.rollover').stop().fadeTo(500, 0);
}
)
});
And then I can just use the .class "rollover" to trigger the effect.
I also have it so you can click on any of these images and have the text load into a DIV. And it fades in as well:
- $(document).ready(function() {
$("#changeText").click(function(){
$('#textBox').hide().fadeIn('slow');
$("#textBox").html("This is my text, I appear in a DIV when you click on the image");
});
This works fine, but what I want to do is have the text come in when you rollover the image, and leave if you rollout. (it doesn't have to fade off, it can just go away) But if you click then it should stay. Is there anyway to do this?
To explain it more simply, I basically want when you rollover the image, for the text to fade in as well, but if you rollout, it fades out. But if you click on it, the text should stay no matter what.
Any Ideas?