CODEWITHSUNDEEP
javascriptjquerycss
user3117575
user3117575

Reputation:

jQuery .slideUp() not working

I've ran into a problem that I can't seem to understand.

Here is my code for jQuery:

var doc = document;
var win = window;
$(doc).ready(function(){
        $('.t').click(function(){
            $('#Notify').slideUp(600);          
        });
});

The code was a lot longer, but I shortened it up where it's just the problem.

here is my CSS for #Notify

#Notify {
    display: none;
    bottom: 0;
    right: 0;
    position: fixed;
    background: rgba(0,0,0,0.6);
    height: 100px;
    width: 100%;
}

Oddly, this doesn't seem to make anything happen all together, but when I remove the display: none; and click the .t it will slide down and disappear.

Upvotes: 10

Views: 31309

Answers (4)

Jai
Jai

Reputation: 74738

may be you can do this with .slideDown():

$(doc).ready(function () {
   $('.t').click(function () {
      $('#Notify').slideDown(600);
   });
});

var doc = document;
var win = window;

Fiddle for .slideDown()

or you can try with .slideToggle() too.

Fiddle for .slideToggle()

Upvotes: 2

LoganEtherton
LoganEtherton

Reputation: 495

jQuery slideUp documentation

Based on your edit, it appears as though you're trying to make the item display after being hidden. slideUp is intended for getting items to perform an animation sliding upwards, like window blinds, and then ultimately being hidden, not being shown.

Perhaps you are looking for slideDown?

Upvotes: 1

brandonscript
brandonscript

Reputation: 72855

slideUp is not working because your element is already hidden. Change it to slideDown and you'll see it appear; conversely, set the CSS to visible, and you'll see it disappear.

Here's a jsFiddle to play with.

Upvotes: 16

Ringo
Ringo

Reputation: 3965

Try this:

var doc = $(document);
var win = $(window);
$(function(){
        $('.t').click(function(){
            $('#Notify').slideUp(600, function(){
               $(this).show();
            });          
        });
});

Upvotes: 2

Related Questions