CODEWITHSUNDEEP
jquery
Nicholas
Nicholas

Reputation: 3

How to exclude a jQuery object from animation?

I have a script like this that performs an animation for a horizontal accordion. Whenever a different slide (li) on the accordion is opened it is put inside the 'active' object. 

<script type="text/javascript" >
$(document).ready(function(){
    active = $('ul li:first-child');

    $('ul li').click(
      function(){
        $(active).animate({width: '40px'}, { queue:false, duration:600 });
        $('div').fadeOut(100).delay(400).fadeIn(100);
        $(this).animate({width: '660px'}, { queue:false, duration:600});
        active = this;          
      }
    );
});
</script>

The animations all work great but the only problem is that when I click on the currently opened slide it runs this-- 

$('div').fadeOut(100).delay(400).fadeIn(100);)

How do I exclude the currently opened slide from running this? I've tried .not and :not but maybe I'm doing it incorrectly.

Upvotes: 0

Views: 509

Answers (3)

Drew Baker
Drew Baker

Reputation: 14430

jQuery has a little known way of dealing with this very problem. Use the .not() function. You can use that to remove elements from the jQuery object.

I would do something like this:

<script type="text/javascript" >
$(document).ready(function(){
    active = $('ul li:first-child');

    $('ul li').not('li.open').click(
      function(){
        $(this).addClass('open');
        $(active).animate({width: '40px'}, { queue:false, duration:600 });
        $('div').fadeOut(100).delay(400).fadeIn(100);
        $(this).animate({width: '660px'}, { queue:false, duration:600});
        $(active).click(function() { event.StopPropagation(); });
        active = this;          
      }
    );
});
</script>

The important lines are .not('li.open') and then "$(this).addClass('open')".

You'll need to add a way off removing the 'open' class from all li's once the menu closes, but not knowing your HTML I can't tell you how best to do that.

Upvotes: 0

Jimmy Chandra
Jimmy Chandra

Reputation: 6580

try putting a guard clause before you animate anything... something like

if (active == this) return;

as first line in the click handler function?

Upvotes: 1

mattsven
mattsven

Reputation: 23293

Shouldn't

if(this != active[0]) $('div').fadeOut(100).delay(400).fadeIn(100);

work?

Upvotes: 1

Related Questions