I'm struggling to get this jquery slide down and up to work

问题

The div I'm animating in jquery is supposed to slide out to expand the width. I've gotten the width animation to work but after adding the slideDown and up code nothing works, the way it should work is:

Enquiries should be clicked and it expands and after it expands the. For slides down and when its clicked again, first the fork slides up and then the ENQUIRIES- shown goes back to its original width.

I'm not sure where my codes gone wrong as I'm new to jquery and java script. THANK YOU FOR ANY HELP!

//-----------ENQUIRY-FORM----------

$('#enquiry-shown').click(function() {
  $(this).animate({
    width: "950px",
    borderRadius: "0px"
  }, 1000);

  setTimeout(function() {
    $('#enquiry-form').slideDown('slow');
  }, 1000);

  function() {
    if ($('#enquiry-form').is("visible") {
        $('#enquiry-form').slideUp("slow");

        else($('#enquiry-form').is("hidden") {
          $('#enquiry-form ').slideDown("slow");
        });

      });
  };

});

/*--------ENQUIRIES---------*/

#enquiry-container {
  text-align: center;
  margin-bottom: 25px;
}

#enquiry-shown {
  background-color: white;
  padding: 10px 0;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  width: 210px;
  border: solid 1px #d8d8d8;
  border-radius: 50px;
  margin: 0 auto;
}

#enquiry-name {
  font-family: "calibri light";
  font-size: 30px;
  text-align: center;
  margin: 0;
  display: inline;
  padding: 0 0 0 10px;
}

#enq-arrowdown {
  width: 25px;
  height: 16px;
  float: right;
  padding: 10px 19px 0 0;
  display: inline-block;
}

#enquiry-form {
  width: 950px;
  height: 400px;
  background-color: white;
  margin: 0 auto;
  display: none;
  border-bottom: solid 1px #d8d8d8;
  border-right: solid 1px #d8d8d8;
  border-left: solid 1px #d8d8d8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="enquiry-container">
  <div id="enquiry-shown">
    <h2 id="enquiry-name">Enquiries</h2>
    <img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
  </div>
  <div id="enquiry-form">
  </div>
</div>

回答1:

I changed i few things in your js code, i used a class to define the condition when to slideup or down

See the result:

//-----------ENQUIRY-FORM----------

$('#enquiry-shown').click(function() {

  var current = $(this)

  if ($('#enquiry-shown').hasClass("active")) {

    $('#enquiry-form').slideUp('slow', function() {
      current.animate({
        width: "210px",
        borderRadius: "50px"
      }, 1000);
    });

    $('#enquiry-shown').removeClass("active");


  } else {
    current.animate({
      width: "100%",
      borderRadius: "0px"
    }, 1000, function() {
      $('#enquiry-form').slideDown('slow');
    });

    $('#enquiry-shown').addClass("active");
  }


});

/*--------ENQUIRIES---------*/

#enquiry-container {
  text-align: center;
  margin-bottom: 25px;
}

#enquiry-shown {
  background-color: white;
  padding: 10px 0;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  width: 210px;
  border: solid 1px #d8d8d8;
  border-radius: 50px;
  margin: 0 auto;
}

#enquiry-name {
  font-family: "calibri light";
  font-size: 30px;
  text-align: center;
  margin: 0;
  display: inline;
  padding: 0 0 0 10px;
}

#enq-arrowdown {
  width: 25px;
  height: 16px;
  float: right;
  padding: 0px 20px 0 0;
  display: inline-block;
  transition: all 1s;
  transform: rotate(-90deg);
}

#enquiry-form {
  width: 100%;
  height: 100px;
  background-color: white;
  margin: 0 auto;
  display: none;
  border-bottom: solid 1px #d8d8d8;
  border-right: solid 1px #d8d8d8;
  border-left: solid 1px #d8d8d8;
}

#enquiry-shown.active img {
  transform: rotate(0deg);
  padding-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="enquiry-container">
  <div id="enquiry-shown">
    <h2 id="enquiry-name">Enquiries</h2>
    <img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
  </div>
  <div id="enquiry-form">
    This is the enquiry form
  </div>
</div>

回答2:

I don't know if u want to achieve this effect, but try this and give me feedback:

$('#enquiry-shown').click(function() {

  if($('#enquiry-form').is(':visible')){
    $('#enquiry-form').slideUp('slow', function(){
      $('#enquiry-shown').animate({
        width: "210px",
        borderRadius: "50px"
      }, 1000);
    });
  }
  else if($('#enquiry-form').is(':hidden')){
    $('#enquiry-shown').animate({
      width: "950px",
      borderRadius: "0px"
    }, 1000, function(){
      $('#enquiry-form').slideDown('slow');
    });
  }
});

回答3:

You have a lot of syntax errors such as incorrectly matched brackets, missing parenthesis, missing function name, and using else when you should use else if. When you fix all of them it looks like your click function already has some of your intended functionality.

Next I'd suggest removing the setTimeout in favor of jQuery's animate end handler, which you use by attaching a function to most animations.

Lastly you should refactor your code a little. I don't think is('visible') does what you think it does, but luckily there's a slideToggle method that does do what you want pretty easily.

Your click handler then needs to consider cases when the menu is already open and when it's not open and then act accordingly. For that you might consider using toggleClass and then checking which class it is with hasClass before deciding what animation to perform.

//-----------ENQUIRY-FORM----------

$('#enquiry-shown').click(function() {
  
  if(!$(this).hasClass('closed')){ // if the form is not closed
    $(this).animate({ // animate the form to open state
      width: "950px",
      borderRadius: "0px",
    }, 1000, ()=>{ 
      $("#enquiry-form").slideToggle() 
    }); 
  }else{ // if the form is closed animate in reverse order
    $("#enquiry-form").slideToggle(
      ()=>{
        $(this).animate({
          width : "210px",
          borderRadius : "50px"
        }, 1000);
      }
     )
  }
  $(this).toggleClass('closed'); // toggle the class

});

/*--------ENQUIRIES---------*/

#enquiry-container {
  text-align: center;
  margin-bottom: 25px;
}

#enquiry-shown {
  background-color: white;
  padding: 10px 0;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  width: 210px;
  border: solid 1px #d8d8d8;
  border-radius: 50px;
  margin: 0 auto;
}

#enquiry-name {
  font-family: "calibri light";
  font-size: 30px;
  text-align: center;
  margin: 0;
  display: inline;
  padding: 0 0 0 10px;
}

#enq-arrowdown {
  width: 25px;
  height: 16px;
  float: right;
  padding: 10px 19px 0 0;
  display: inline-block;
}

#enquiry-form {
  width: 950px;
  height: 400px;
  background-color: white;
  margin: 0 auto;
  display: none;
  border-bottom: solid 1px #d8d8d8;
  border-right: solid 1px #d8d8d8;
  border-left: solid 1px #d8d8d8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="enquiry-container">
  <div id="enquiry-shown">
    <h2 id="enquiry-name">Enquiries</h2>
    <img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
  </div>
  <div id="enquiry-form">
    <div> Hello I am a form </div>
  </div>
</div>

来源：https://stackoverflow.com/questions/44862739/im-struggling-to-get-this-jquery-slide-down-and-up-to-work

标签

javascript

jquery

html

css