All geek questions in one place

AddClass after animation not working with jquery

addClass after the animation does not work properly with jquery.

When I click on the button, I try to bring the banner from the bottom up, and when the user clicks again, he will return to the base and hide.

below is the code that I have. The first part works, but the second part does not slide down. Just leaving.

Any help is appreciated.

Thank!

$(document).ready(function() {

  $("#projs").click(function() {
    if ($("#projList").hasClass('hideAway')) {
      $("#projList").removeClass('hideAway').animate({
        bottom: '25%'
      });
    } else {
      $("#projList").animate({
        bottom: '0'
      }).addClass('hideAway'); //.addClass('hideAway');
    }

  });


});
.hideAway {
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="projs" value="Some Projects" style="border:none;border: 2px solid #e7e7e7;"></input>
<div id="projList" style="width:100%;position:absolute;bottom:0;" class="hideAway">
  <table style="margin:0px;width:100%;padding:0px;">
    <tr>
      <td bgcolor="#EA664A" align="center" height="75" width="75">
      </td>
      <td bgcolor="#D8B90C" align="center" height="75" width="75">
      </td>
    </tr>
    <tr>
      <td bgcolor="#0CD836" align="center" height="75" width="75">
      </td>
      <td bgcolor="#1AD8E3" align="center" height="75" width="75">
      </td>
    </tr>
  </table>
</div>
Run code

jsfiddle link

+4
source share
5 answers

You must add a class after finalizing.

$("#projList").animate({bottom:'0%'},function(){$(this).addClass('hideAway')})


$(document).ready(function(){
  $("#projs").click(function(){
    if($("#projList").hasClass('hideAway')) 
      $("#projList").removeClass('hideAway').animate({bottom: '20%'});
    else
      $("#projList").animate({bottom:'0%'},function(){$(this).addClass('hideAway')})
  });
});
.hideAway {
    visibility:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="button" id="projs" value="Some Projects" style="border:none;border: 2px solid #e7e7e7;"></input>
<div id="projList" style="width:100%;position:absolute;bottom:0;" class="hideAway"> 
  <table style="margin:0px;width:100%;padding:0px;">
    <tr>
      <td bgcolor="#EA664A" align="center" height="75" width="75"></td>
      <td bgcolor="#D8B90C" align="center" height="75" width="75"></td>
    </tr>
    <tr>
      <td bgcolor="#0CD836" align="center" height="75" width="75"></td>
      <td bgcolor="#1AD8E3" align="center" height="75" width="75"></td>
    </tr>
  </table>    
</div>
Run code

Note. Use the full page to view the result.

+1
source

, , , . jQuery "", hiddenAway. , . , .

$(document).ready(function() {

    $("#projs").click(function() {
        if ($("#projList").hasClass('hideAway')) {
            $("#projList").removeClass('hideAway').animate({
                bottom: '25%'
            });
        } else {
            $("#projList").animate({
                bottom: '0'
            })
            setTimeout(function() {
                $("#projList").addClass('hideAway');
            }, 300) //.addClass('hideAway');
        }

    });
});

** : **

Ehsan, , , . , , jQuery , . :

$(document).ready(function() {

    $("#projs").click(function() {
        if ($("#projList").hasClass('hideAway')) {
            $("#projList").removeClass('hideAway').animate({
                bottom: '25%'
            });
        } else {
            $("#projList").animate(
                {
                    bottom: '0'
                },
                function() {
                    $("#projList").addClass('hideAway');
                }
            );
        }

    });

});
+1

	$(document).ready(function() {
	  $("#projs").click(function() {
	    if ($("#projList").hasClass('hideAway')) {
	      $("#projList").removeClass('hideAway').animate({
	        bottom: '25%'
	      });
	    } 
      else {
	      $('#projList').animate({
	        bottom: "0%"
	      }, 800, function() {
	        $(this).addClass('hideAway');
	      });
	    }
	  });
	});
.hideAway {
    visibility:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="projs" value="Some Projects" style="border:none;border: 2px solid #e7e7e7;"></input>
<div id="projList" style="width:100%;position:absolute;bottom:0;" class="hideAway">
  <table style="margin:0px;width:100%;padding:0px;">
    <tr>
      <td bgcolor="#EA664A" align="center" height="75" width="75">
      </td>
      <td bgcolor="#D8B90C" align="center" height="75" width="75">
      </td>
    </tr>
    <tr>
      <td bgcolor="#0CD836" align="center" height="75" width="75">
      </td>
      <td bgcolor="#1AD8E3" align="center" height="75" width="75">
      </td>
    </tr>
  </table>
</div>
0

, :

$(document).ready(function() {
  $("#projs").click(function() {
    $("#projList").slideToggle().css("bottom", "25%").toggleClass("hideAway");
  });
});
.hideAway {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="projs" value="Some Projects" style="border:none;border: 2px solid #e7e7e7;"></input>
<div id="projList" style="width:100%;position:absolute;bottom:0;" class="hideAway">
  <table style="margin:0px;width:100%;padding:0px;">
    <tr>
      <td bgcolor="#EA664A" align="center" height="75" width="75">
      </td>
      <td bgcolor="#D8B90C" align="center" height="75" width="75">
      </td>
    </tr>
    <tr>
      <td bgcolor="#0CD836" align="center" height="75" width="75">
      </td>
      <td bgcolor="#1AD8E3" align="center" height="75" width="75">
      </td>
    </tr>
  </table>
</div>
0

, , , , . .

.animate.

jQuery .animate - .

The callback function will be executed upon completion of the parent function.

jsFiddle here .

$(document).ready(function() {

  $("#projs").click(function() {
    if ($("#projList").hasClass('hideAway')) {
      $("#projList").removeClass('hideAway').animate({
        bottom: '25%'
      });
    } else {
      $("#projList").animate({bottom: '0'}, function(){
        $(this).addClass('hideAway');
      });
    }

  });


});
.hideAway {
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="projs" value="Some Projects" style="border:none;border: 2px solid #e7e7e7;"></input>
<div id="projList" style="width:100%;position:absolute;bottom:0;" class="hideAway">
  <table style="margin:0px;width:100%;padding:0px;">
    <tr>
      <td bgcolor="#EA664A" align="center" height="75" width="75">
      </td>
      <td bgcolor="#D8B90C" align="center" height="75" width="75">
      </td>
    </tr>
    <tr>
      <td bgcolor="#0CD836" align="center" height="75" width="75">
      </td>
      <td bgcolor="#1AD8E3" align="center" height="75" width="75">
      </td>
    </tr>
  </table>
</div>
Run code
0
source

Source: https://habr.com/ru/post/1681416/

More articles:


All Articles