15th of February 2012 0
How do I animate picture in jQuery when i rollover it?
I am trying to use jQuery on wordpress to animate a picture when the mouse hovers over it. There are a group of 5 photos..and it would be nice not to make a function for each one. This code below does NOT work when I use the ID of the image for the hover funtion’s ID, but when I use it for a div i created, it animates the picture perfectly. Only thing is i need a mouseOut function too, but not sure how to go about that either. I tried placing the picture inside of the div and maing a rollover effect for that div to affect the picture, however that doesnt work either. This is what I have:
$ (“#topbarimg”).hover(function(){
$ (“#topbarimg”).animate({
width: “120px”,
height: “120px”
}, 750 );
}) ;
Any help is appreciated!
Thanks!
Thanks ! This worked! But I still was wondering about the mouseout function.
Best answer:
Answer by Greg
Hi Richie,
jQuery is fun when it works, but a real pain it doesn’t do what you expect.
I had trouble using jQuery in WordPress until I replaced $ with jQuery. This was necessary because WordPress uses jQuery as well.
This is the format I use for my functions: jQuery(“foo”).bar({, etc.
Depending on your application, you may need to wrap your functions inside this block:
$ (document).ready(function() {
// Your functions
});
This ensures that the page is fully loaded, giving you access to all of the page elements.
If you’re not already using it, FireBug is a handy tool to have when debugging JS in WordPress.
Hope this helps.
Give your answer to this question below!
Share it!
Was it good for you to?
Related posts
Similar posts to this one- JQuery Navigation Idea, what would be the best way to do this.?
- Web Dev Tutorial: Animated Navigation Bar With CSS and jQuery (Part 2 of 5)
- JQuery Hover Animation
- Web Dev Tutorial: Animated Navigation Bar With CSS and jQuery (Part 1 of 5)
- How to keep animations from repeating JQuery/JavaScript?
- Chrome6 jQuery Animate
- jQuery won’t pass arguments?
Sponsors
Support for the site!No sponsors at the moment.