CODEWITHSUNDEEP
jquery
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

animate is not a function error appear

I have a image slider and I have managed images like this

+----------------------------------------------------------+
| +-----+ +------+ +------+ +------+ +------+ +----------+ |
| |     | |      | |      | |      | |      | |          | | visible images
| +-----+ +------+ +------+ +------+ +------+ +----------+ |
+----------------------------------------------------------+
  +-----+ +------+ +------+ +------+ +------+ +----------+  
  |     | |      | |      | |      | |      | |          | overflow hidden images
  +-----+ +------+ +------+ +------+ +------+ +----------+

and would like to animate / fadeIn to hidden images on mouseover() function like this

Demo

But when I used firebug it's saying .animate() is not a function. Anyway I noticed in my fiddle when I mouseover all red spans then only it is animated amazingly.

Question

How can I animate to the span on which mouse is hovered without placing a class inside spans and selecting like using nth-child?

I need to set margin-top only on one span on which mouse is hovered. Also I have to use fadeIn effect.

updated demo //working with float: left

Upvotes: 1

Views: 466

Answers (3)

Bryce
Bryce

Reputation: 6610

To get each span to rise to the top on mouseover, you need to make sure they are block level elements (or inline-block), with vertical-align set to top. This will make sure the margin is actually having an effect.

See this fiddle for a demo

The problem with your example is that margin will not trigger a mouseover event. Other properties such ass padding will trigger it, because that is considered part of the element. Since your particular example can't use padding (otherwise it would be changing the size of the red spans, you could use some other property that is invisible to the user, but gives you the functionality you require. I recommend a white border.

Demo: http://jsfiddle.net/UZKwY/1/

Upvotes: 1

CodinCat
CodinCat

Reputation: 15914

It's because the inline-block, use block and float: left, then it should work.

http://jsfiddle.net/bts7e/3/

Upvotes: 1

L_Holcombe
L_Holcombe

Reputation: 389

Is this what you wanted to do?

$('div').mouseover(function(){
   //alert('hi');  //working
    $('span').animate({'margin-top':'-10px'},1000); 
});

Edit - scratch that, here's what you need to change:

span{
    background-color: red;
    height: 20px;
    width: 20px;
    display: block;
    float: left;
    border: 1px solid white;
}

Upvotes: 1

Related Questions