6

I am using jQuery's slidetoggle, and I am wondering if there is a way I can make it slide up from the bottom, everywhere I look I cant seem to find the answer, here is the code I am using:

jQuery(document).ready(function(){ 
    jQuery(".product-pic").hover(function(){
        jQuery(this).find('.grid-add-cart').slideToggle('2000', "easeOutBack", function() {
            // Animation complete.
        });
    });
});
j08691
  • 204,283
  • 31
  • 260
  • 272
onei0120
  • 189
  • 1
  • 9
  • 28

4 Answers4

11

Do you want to achieve something like this?

HTML

<div id="box">
    <div id="panel">
    </div>
</div>​

CSS

#box
{
    height: 100px;
    width:200px;
    position:relative;
    border: 1px solid #000;
}
#panel
{
    position:absolute;
    bottom:0px;
    width:200px;
    height:20px;
    border: 1px solid red;
    display:none;
}

JS

$("#box").hover(function(){
    $("#panel").slideToggle();
}, function(){
    $("#panel").slideToggle();
});​

OR as per Update suggested by Roko

var panelH = $('#panel').innerHeight();

$("#box").hover(function(){
    $("#panel").stop(1).show().height(0).animate({height: panelH},500);
}, function(){
    $("#panel").stop(1).animate({height: 0},500, function(){
      $(this).hide();  
    });
});​
Community
  • 1
  • 1
Bongs
  • 5,502
  • 4
  • 30
  • 50
  • Ok, now in the real-world: how would you prevent animations buildups on multiple hover/out actions? Please improve your answer. – Roko C. Buljan May 11 '12 at 18:34
  • @Roko, There are many ways around to prevent the animation on multiple hover/out. I used `hover` event for demonstration. One can trigger the action on different event. It would be helpful for me if you can brief me what you meant by real-world (scenario may be)? Or you can definitely edit the demo/answer if I'm missing anything. – Bongs May 11 '12 at 18:45
  • I would simply not use slideToggle. – Roko C. Buljan May 11 '12 at 18:58
  • 2
    As you can see, commented is the maximally improved example with slideToggle - to prevent *fast-multiple-mouseovers* and below is a nice example with `.animate()` and `.stop()` http://jsfiddle.net/mt5He/ I just wanted to say, that I would never give an example to someone with some code that I would **never** use. No bad feelings. Cheers! +1 – Roko C. Buljan May 11 '12 at 19:03
  • ohh Kool... thanks :) You can edit this answer as well so in case if the jsfiddle link won't work the solution will be here :) – Bongs May 11 '12 at 19:06
  • njah, you can add an *edit* with an *...you can also:* :) (P.S. long life to jsFiddle :D ) – Roko C. Buljan May 11 '12 at 19:10
10

You can do it by using a wrapper on the element you want to toggle. Set the position of the wrapper to relative and the position of the element to toggle to absolute with the bottom property set to zero.

Like this jsFiddle example.

jQuery:

$("button").click(function() {
    $("p").slideToggle("slow");
});​

CSS:

p { 
    position:absolute;
    bottom:0;
    display:none;
    padding:0;
    margin:0;
}

div {
    position:relative;
    width:300px;
    height:100px;
}
j08691
  • 204,283
  • 31
  • 260
  • 272
3

LIVE DEMO

jQuery(function($){

  $(".product-pic").hover(function( e ){
    var px  = e.type=="mouseenter"? 0 : 220 ;
    $(this).find('.grid-add-cart').stop().animate({top:px});
  });
});
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
0

The simplest way would be to use jQuery UI for that, jQuery alone doesn't have a separate function for it. See here and here.

Other way to go is by doing CSS animations using the animate function.

Shomz
  • 37,421
  • 4
  • 57
  • 85
  • I meant to say there is no native function for that. Of course it can be done - jQueryUI is built on jQuery... not much wisdom there... I just wanted to give the simplest solution since he obviously doesn't want to do manual CSS animations. – Shomz May 11 '12 at 18:32
  • @Shomz I thought `.animate()` was a *method*. `function animate(){` is something else. – Roko C. Buljan May 11 '12 at 18:41