CODEWITHSUNDEEP
jquery
StudioTime
StudioTime

Reputation: 23999

alternative to JQuery .slideDown()

Is there an alternative to jquery slideDown() that is known of?

The reason I ask is that I think slideDown should really be named roll down as it kind of unravels contents as opposed to them actually sliding down.

This is an example of the effect I mean - mouseover one of the main items on the page (doesn't work in ie): Example slide down

Ideally needs to work in IE too so I'm guessing this is more transition than js which is ok when everyone on ie10, might take a while!

Upvotes: 1

Views: 3440

Answers (2)

Dominic Green
Dominic Green

Reputation: 10258

The way I would do this is set my container to position relative and an overflow hidden; Then have my hover over as position absolute with a top of -50px, then use jquery animate to move it down on hover.

An example is here

<div class="container">
    <div class="hover"></div>   
</div>

.container{width:400px;height:400px; border:1px solid grey; position:relative;overflow:hidden;}
.hover{position:absolute;top:-50px; width:100%;height:50px; background-color:red;}

$('.container').hover(function() {
    $('.hover').animate({
        top: '+=50'
    });
},function(){
    $('.hover').animate({
        top: '-=50'
    });

});

Upvotes: 1

Andrea Turri
Andrea Turri

Reputation: 6500

With a bit more of code you can use .animate().

Ref: http://api.jquery.com/animate/

a small example:

$(document).ready(function(){
  $(element).toggle(function(){
    $(this).animate({height:40},200);
  },function(){
    $(this).animate({height:10},200);
  });
});

Upvotes: 3

Related Questions