CODEWITHSUNDEEP
jquery
CodeyMonkey
CodeyMonkey

Reputation: 739

jQuery Animation not applying for a link?

I have had some help here about showing and hiding div's the following code has been created as a result, which works great, the only problem is when i click a link with the class .closepanel the slideup animation doesn't work e.g. the animation is not applied when it closes... seems strange as the closing animation does apply for clicks anywhere else...

Especially as it shares the function to slideup as the one that works...

$(document).ready(function(){
$('#panel').click(function(e) {
    e.stopPropagation();
  });      
  $(".panel-tab").click(function(e) {
    $("#panel").slideDown("slow");
    e.stopPropagation();
  });
  $(document,'.closepanel').click(function() {
      $("#panel").slideUp("slow");
  });
})

Upvotes: 0

Views: 44

Answers (2)

StuperUser
StuperUser

Reputation: 10850

Your argument list in the selector is the wrong way around for this line:

$(document,'.closepanel')

the context argument should be second:

$('.closepanel', document)

Which will select elements with the class closepanel in the context of document.

See: http://api.jquery.com/jQuery/ for more details on the context parameter.

Update: To select everything but .closepanel use:

$(document).Remove('.closepanel')

or

$('*:not(.closepanel)')

Then bind your event handlers.

See: http://api.jquery.com/remove/ and http://api.jquery.com/not-selector/ for more information

Update 2:

If you are wanting to build a collection to bind a handler that slides the panel up, you can:

You can also use one() http://api.jquery.com/one/ to bind a handler to an event to run once to prevent side effects of slideup() being called when the panel is not shown.

Upvotes: 1

inquam
inquam

Reputation: 12932

Now I might remember wrong. But I think that if you limit your search with an argument to JQuery, that argument should be the second argument. But since you use document you are not actually limiting it very much.

So, either of these should probably work

$('.closepanel').click(function() {
      $("#panel").slideUp("slow");
  });

or if you really want to reference the document

$('.closepanel', document).click(function() {
      $("#panel").slideUp("slow");
  });

Upvotes: 1

Related Questions