CODEWITHSUNDEEP
javascriptjqueryhtml
Barrosy
Barrosy

Reputation: 1457

jQuery .animation() function runs line twice and not working

I have been trying to work on a function to scroll my page to the top side of the page when I click on an anchor. My jQuery script looks like:

$("a#drop-user-box").click(function()
                           {
  console.log("foor"); //Would return foo value once
  $("html, body").animate({scrollTop: 0}, "slow", function()
  {
    //console.log("foor"); Would return foo value twice?

    // Code doesn't work when in here
    // $(".drop-down").toggleClass('hidden');
    // $(".drop-down input[type='e-mail']:first-of-type").focus();
  });
  // Code does work when in here
  // $(".drop-down").toggleClass('hidden');
  // $(".drop-down input[type='e-mail']:first-of-type").focus();
});

What is the difference with executing the piece of code outside of the animate() function and within it? And why does the code not work when the two lines for the drop-down are within the .animate() function? Please explain me how this works.

Thanks in advance,

Edit:

How would I make this work?:

$("a#drop-user-box").click(function(e) {
	e.preventDefault();
    $("html, body").animate({
        scrollTop: 0
    }, "slow", function() {
        $('.drop-down').show();
    });
});
.user-box .drop-down
{
  padding: 15px 25.5px;
	display: block;
  border: 1px solid #aaa;
	background-color: #fff;
}

.user-box .drop-down form
{
	width: 250px;
}

.space
{
  border: 1px solid #000;
  height: 900px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="drop-down hidden">
  <form action="" method="post">
    <div class="form-group">
      <input type="e-mail" class="form-control text-box single-line" name="E-mail" placeholder="E-mail adres">
    </div>
    <div class="form-group">
      <input type="password" class="form-control text-box single-line" name="Wachtwoord" placeholder="Wachtwoord">
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Bewaar login informatie
      </label>
    </div>
    <input type="submit" class="btn btn-default" value="inloggen">
  </form>
  <a href="#">Wachtwoord vergeten?</a>
</div>

<div class="space">

</div>

<a href="#" id="drop-user-box">Foo</a>

Upvotes: 0

Views: 74

Answers (1)

Clomp
Clomp

Reputation: 3308

The reason that it's not working is because the .show() function doesn't remove the "hidden" class name. The .show() & .hide() functions operate on the style="display:block" and style="display:none" attributes & properties. So you'll have to change this line of HTML:

<div class="drop-down hidden">

To this: 

<div class="drop-down" style="display:none">

Then it will work. See this jsfiddle for the demo.

Upvotes: 1

Related Questions