CODEWITHSUNDEEP
jqueryslideup
Chris
Chris

Reputation: 19

jQuery animate on image

I want to do exactly the same thing in my shop: http://www.templatemonster.com/demo/34477.html

Please hover your mouse on any bag. As you can see the short description with pink background is sliding from the bottom.

Here is where I am now: http://jsfiddle.net/THwuT/

The top 3 product are almost have it, but the one on the bottom showing description on first one. It happen because I gave them position:absolute, but I don't have different idea how to do this without this.

Upvotes: 1

Views: 208

Answers (2)

Mahipal
Mahipal

Reputation: 126

Try this code jquery animate problem will clear

http://jsfiddle.net/THwuT/62/

Upvotes: 0

marspzb
marspzb

Reputation: 364

Here is a new version of your fiddle with some things fixed( I'm really sorry I pressed update instead of fork :$). The problem you was having was that you didn't put position relative on the .product containers (every time you've a parent with position relative, the position absolute will align according that parent instead of the page).
Also I puted the mouseenter/mouseleave methods instead of the old ones under the .prod divs because when you get your mouse on the desc it had a strange effect. And I removed the slideUp/down for animates because the stop can mess that functions.
For making that site effect you need to add a height to your product containers,a overflow hidden and animate the top of the msg instead of the height. Here there is a fiddle with that changes fiddle.

Upvotes: 2

Related Questions