CODEWITHSUNDEEP
javascriptjquery
HyperGainZ
HyperGainZ

Reputation: 75

jquery .delay() not doing stuff

Hello i have made a modal and added a close button to it so when its clicked it adds a class to the modal the trigges the closing modal animation but then i tryed the remove the class again but its doing nothing

this is my code 

$('.close').on('click', function(){
$(this)
  .parent().addClass("closing")
  .delay(3250)
  .queue(function() {
     $(this).parent().removeClass('closing');
     $(this).parent().removeClass('open');
     $(this).dequeue();
 });
});

i added a console log to see if the .delay works and it dose it seem it cant find the right ellement to remove the classes from

Upvotes: 0

Views: 78

Answers (2)

halfzebra
halfzebra

Reputation: 6797

Because of chaining, this variable inside .queue() will refer to the parent of .close element.

$('.close').on('click', function () {
    $(this) // Initial element.
        .parent().addClass("closing") // this refers  to$(this).parent()
        .delay(3250)
        .queue(function () {
        $(this).parent().removeClass('closing'); // This refers to $(this).parent().parent()
        $(this).parent().removeClass('open');
        $(this).dequeue();
    });
});

Solution 

  $('.close').on('click', function() {

    $(this).parent().addClass("closing")
      .delay(3250)
      .queue(function() {
        $(this).removeClass('open closing').dequeue();
      });
  });
    .closing {
      background: red;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
  <button class="close">Close</button>
</div>

Upvotes: 2

charlietfl
charlietfl

Reputation: 171679

When you see yourself writing $(this) several times in an event handler you should cache that object as variable for efficiency to minimize function calls as well as make code easier to read

The new named variable then makes it easier to know exactly what element you stored when you start getting into other this context also which is what is happening to you now. In your situation you have an this which is the element and then inside the queue callback this refers to the initial element's parent which is what is confusing you.

Simple fix...cache reference to parent.

$('.close').on('click', function () {

    var $parent = $(this).parent();

    $parent.addClass("closing")
           .delay(3250)
           .queue(function () {
               $parent.removeClass('open closing').dequeue();    
            });
});

In this case what you really would want to cache is the parent

Upvotes: 1

Related Questions