2

I have following code

HTML

<a href="#" class="close">Close</a>

 <div class="box">

    <input type="text">

    <input type="text">

    <input type="text">

</div>

jQuery

$(document).ready(function () {

    $('.box').on('click', function () {
        $(this).addClass('animated');
    });

    $('.close').on('click', function () {
        $('.box').removeClass('animated');
    });

});

CSS

.box {
    width: 0;
    height: 0;
    background: #e2e2e2;
    border-radius: 50%;
    padding: 30px;
    transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
    overflow: hidden;
}
input {
    opacity: 0;
    border: 1px solid #fff;
    transition: opacity 0.3s ease;
    transition-delay: 0.3s;
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 5px;
    box-sizing: border-box;
}
.box.animated {
    border-radius: 0;
    width: 400px;
    height: 400px;
    padding: 20px;
}
.box.animated > input {
    opacity: 1;
}

DEMO

There are two things

1) Once the box has been expanded the input elements should be visible. I have achieved this using transition-delay property.

2) But when the close link is clicked first the inputs opacity should be 0 and when the inputs are completely invisible then the box should go to its previous shape which is a circle.

Question: How do i achieve #2

3 Answers 3

3

add this to css

.box:not(.animated){
    transition-delay:0.3s;
}
.box:not(.animated) input{
    transition-delay:0s;
}

https://jsfiddle.net/apLtw7av/2/

explanation: transition-delay property will aply depending on having class animated. Clicking on close will remove animated class therefore aply new transition-delay

1
  • Awesome.. Thanks mate.. This is what i was looking for.
    – Prasanga
    Nov 11, 2015 at 11:24
0

Try to show/hide input fields like this:

$(document).ready(function () {

    $('.box').on('click', function () {
        $('.box input').show();
        $(this).addClass('animated');
    });

    $('.close').on('click', function () {
        $('.box input').hide();
        $('.box').removeClass('animated');
    });

});
0

So here is my anwser and an EXAMPLE

HTML
<span class="close">X</span>
<div class="box">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

CSS
.box {
  width: 0;
  height: 0;
  background: #e2e2e2;
  border-radius: 50%;
  padding: 30px;
  transition: all 300ms ease 600ms; /*This is the only thing You need to change*/
  overflow: hidden;
}
input {
  opacity: 0;
  border: 1px solid #fff;
  transition: all 300ms ease 300ms; /*input delay + input transition time 300 + 300 = 600*/
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 5px;
  box-sizing: border-box;
}
.box.animated {
  border-radius: 0;
  width: 400px;
  height: 400px;
  padding: 20px;
}
.box.animated > input {
  opacity: 1;
}

.close{
  cursor:pointer;
  position: absolute;
  top:0px;
  font-weight:bolder;
  font-size:1.5rem;
  display:none;
}

JQuery
$(document).ready(function () {

  $('.box').on('click', function () {
    $(this).addClass('animated');
    $('.close').css({display:"block"});
  });

  $('.close').on('click', function () {
    $('.box').removeClass('animated');
    $(this).css({display:"none"});
  });

});

The only change you need to do is add a delay to the box so it starts after the input, so it goes like input delay + input transition time(look at the comments in the css to see the values you need to play with)

One more tip, when you use the same values in the transition you could use all

/*this*/
transition: all 0.3s ease;

/*is the same  as*/
transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;

HOPE THIS HELPS T04435

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.