CODEWITHSUNDEEP
jquerycss
Raihan
Raihan

Reputation: 4001

CSS Transition effect issue while removing a class with click function

I have a Div with two classes. FIDDLE

HTML

<div class="plug slide-down">   
</div>

This div initially stays at the bottom of the page. but when I click on the div I added click function to remove the .slide-down and div moves at the top.

JS

$('.plug').click(function(){
    $(this).removeClass("slide-down");
});

Upto this it's working fine but when I click on the div it quickly moves at the top. I wanted to move this div at top with some sliding effect. I tried to add CSS transition but not working somehow. What I need to do so that this div moves bottom to top with some sliding effect ?

Any help will be appreciated.

Upvotes: 0

Views: 90

Answers (4)

cssyphus
cssyphus

Reputation: 40078

Since you were using bottom to set the div location, you should continue using bottom with jQuery animate:

$('.plug').click(function(){
    $(this).animate({
        'bottom': '170px',
    },1000,function(){
        //$(this).removeClass('slide-down');
    });
});

jsFiddle Demo

Upvotes: 1

H&#233;ctor
H&#233;ctor

Reputation: 509

Use this code, it animate top property, but you should change your slide-down class: http://jsfiddle.net/dusofnct/6/

CSS:

.slide-down{
    position: fixed;
    top: 90%;
    right: 0;
    left: 0;
    z-index: 999;
}

JS:

$('.slide-down').click(function(){
    $(this).animate({'top':0},1000,function(){
        $(this).removeClass('slide-down');
    });
});

Upvotes: 0

chazsolo
chazsolo

Reputation: 8439

Try looking into jQuery.animate. You could do something similar to this:

$('.plug').on('click', function() {
    var $this = $(this);
    $this.animate({ top: 0, height: 300 }, function() {
        $this.removeClass('slide-down');
    });
});

Here is the fiddle

Upvotes: 2

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

instead of bottom: -250px; try using transform:translateY(250px);

demo - http://jsfiddle.net/victor_007/dusofnct/4/

.slide-down {
    transform:translateY(250px);
    z-index: 999;
    position: fixed;
    right: 0;
    left: 0;
    bottom:0;
}
.plug {
    background:red;
    -webkit-box-shadow: 2px 0px 3px 0px rgba(0, 0, 0, .1);
    -moz-box-shadow: 2px 0px 3px 0px rgba(0, 0, 0, .1);
    box-shadow: 2px 0px 3px 0px rgba(0, 0, 0, .1);
    height:300px;
    transition: all 2s;
}

Upvotes: 1

Related Questions