Adding jQuery fading effect into the website

Vfxdude » BigFeature

Adding jQuery fading effect into the website

(9 posts) (3 voices)

Started 1 year ago by EricYue
Latest reply from EricYue

Tags:

EricYue
Member

Hi there!

I am trying to add the fading effect with jQuery on my site like in

http://www.illusiodesign.com/

But cannot make it work.
I got some lines from Radiant but cannot make it work on my site.

Add this into a custom.js:

jQuery(function($){
jQuery("a").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
jQuery("a").hover(function(){
jQuery(this).fadeTo("fast", 0.5); // This should set the opacity to 100% on hover
},function(){
jQuery(this).fadeTo("fast", 1.0); // This should set the opacity back to 30% on mouseout
});
});

After that, open your functions.php and add the following line

function my_scripts() { ?>
<script src="<?php bloginfo('url'); ?>custom.js"
type="text/javascript"></script>
<?php }

Make sure your custom.js is saved in the root directory.

But cannot make it work.
I am using BFNAV.

Need some help please!

Posted 1 year ago #
vfxdude
admin

you need to call the my_scrips function like this:

add_action( 'wp_head', 'my_scripts' );

or you can just add the script like this:

wp_enqueue_script('custom_script', WP_CONTENT_URL . 'custom.js', array('jquery'), '1.0');

Posted 1 year ago #
EricYue
Member

Hi there!
Ok, so I did create a file called custom.js with Dreamweaver and put the lines. I saved the file into http://www.yuefoundation.org/wordpress/custom.js

Then went to function.php from BFNAV and opted for

wp_enqueue_script('custom_script', WP_CONTENT_URL . 'custom.js', array('jquery'), '1.0');

in line number 9

but still doesn´t work...

Doing anything wrong? Or everything wrong?

Thanks again dude!

Posted 1 year ago #
vfxdude
admin

that is not the right folder to put the js file (it must be in the wp-content folder with that code). If you want to use that folder change the code to this:

wp_enqueue_script('custom_script', get_bloginfo('wpurl') . '/custom.js', array('jquery'), '1.0');

If you use Firebug (firefox addon) you can check if the script is loaded into the browser, and also debug it.

Posted 1 year ago #
EricYue
Member

Hi there,

Sorry again... But I tried already and it doesn´t seem to load...

:((

Any other problems that might be happening?

I added

wp_enqueue_script('custom_script', get_bloginfo('http://www.yuefoundation.org/wordpress') . '/custom.js', array('jquery'), '1.0');

into functions.php (from BFNav) but no luck. Emptied the cache of both FIREFOX and SAFARI and it doesn´t load....

Posted 1 year ago #
vfxdude
admin

the wp_enqueue_script call you added is wrong, don't add your url there. this is like it should be:

wp_enqueue_script('custom_script', get_bloginfo('wpurl') . '/custom.js', array('jquery'), '1.0');

Just check the code if the js importing is added, and there you see the url too, but no reason to struggle more if can't get it to work. Instead you can manually add the script to header.php or just add the code to scripts field in the theme settings.

Posted 1 year ago #
EricYue
Member

Dude!

It worked!!! Thanks a lot man!!!!

Arigatou! Gracias!, Merci! Xie xie!

Posted 1 year ago #
illusio
Member

Cool, I just saw your post on the featured websites area. Looks like you're all set.

- Chuck

Posted 1 year ago #
EricYue
Member

Thanks again for all your help!

BTW, now I got the effect... Anyway to have the effect but NOT on the HEADER PICTURE and NEITHER the DEFAULT IMAGES of the POSTS?

Thanks again. Amazed on how useful this forum is!

Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.