fade in fade out issue

[dynamyc]

This is my code: http://jsfiddle.net/ynUKx/1/.
When I implement the code on my site it doesn’t work.
This is the link, also when I check the firebug console I get this

$ is not a function

[Break On This Error] $(document).ready(function() 

What’s wrong?

[tomslick]

$(document).ready(function()

{

$("div.hover").hover(

function () {

$("div.fade").fadeIn('slow');

},

function () {

$("div.fade").fadeOut('slow');

}

);

});

you need to change the “$” to “jQuery

jQuery(document).ready(function()

{

jQuery("div.hover").hover(

function () {

jQuery("div.fade").fadeIn('slow');

},

function () {

jQuery("div.fade").fadeOut('slow');

}

);

});



		
	

[dynamyc]

Thanks guys.
Now I’m thinking to add a data-title on the images or a class because I want a different title for each image and it’s not good to use a div with some text for every image.
I want some suggestions on how I can do this.

[dynamyc]

I’ve made some adjustments on the script, you can check it here.
Now I have another issue , I can’t position the fade in text outside of the thumbnails container.
What’s the problem?

[mattgoucher]

I think your going about this in the wrong direction a bit. In your most recent example, it looks like you have one container with that the text is supposed to populate?

To me, it would make the most sense to grab the text from each of the images, and use jquery to add a span or somthing.

Example (Fiddle)

$(document).ready(function(){

$('#list li').hover(



function(){

// When Hovering

var title = $(this).children('img').attr('title'),

span = $(this).children('span');



if ( span.length ) {span.fadeIn('fast');return;}



span = $('')

.text( title );



span.appendTo($(this));





},

function(){

// When Not Hovering

var span = $(this).children('span');

span.fadeOut('fast');

}

);

});

In the example above, I’m using jquery to add a span, and after the user has stopped hovering, I hide the span. The second time around, jQuery doesn’t touch the DOM at all, I’m just fading the already created span in.

[dynamyc]

Thanks for your approach.
Still I can not position the span outside of the thumbnail container.
Here is the link

[mattgoucher]

If you want to continue to work with your existing code, there are a few things to note.

// Your binding the mouseenter to a specific element



link.bind('mouseenter', function(){

var tag = jQuery('#tt');



tag.html(jQuery(this).find('img').data('title'));



jQuery(this).prepend(tag);



jQuery('#tt').fadeIn('slow');

});

Try somthing like this.

$('.jTscroller a').find('img').mouseenter(

function() {



// Code Here



}

);

[dynamyc]

I’m trying something like this but it’s not working :

jQuery(document).ready(function()

{





jQuery('.jTscroller a').find('img').mouseenter(

function() {



var tag = jQuery('#tt');



tag.html(jQuery(this).find('img').data('title'));



jQuery(this).prepend(tag);



jQuery('#tt').fadeIn('slow');

});



link.bind('mouseleave', function(){

jQuery('#tt').fadeOut('slow');





}

);

missing } after function body is showing when I’m looking in firebug console

[mattgoucher]

It will make your code 100 times easier to debug if everything is spaced correctly. Also, your script will run alot faster if you define your jQuery objects and then use then, instead of defining them over and over again.

– Matt

jQuery(document).ready(function(){





// Define Your Variable At The Top, So you can use it later

var tag = jQuery('#tt');





jQuery('.jTscroller a').find('img').mouseenter(



function(){



tag.html(jQuery(this).find('img').data('title'));



jQuery(this).prepend(tag);



// You already defined a var, use it.

tag.fadeIn('slow'); //jQuery('#tt').fadeIn('slow');



}



);



link.bind('mouseleave', function(){



jquery(tag).fadeOut('slow')



});





});

If you need a further example, reference my working version that seems to accomplish your problem. (FIDDLE)

[Author]

Posts