CODEWITHSUNDEEP
jqueryhtmlcssdrop-down-menu
shez
shez

Reputation: 65

Select Box with Arrows

I want to add transition of fading when values are changing. I tried thru CSS but no success and as far as Jquery animate i have no idea how to apply that. here is my code on codepen

<div class="selectBox">
  <input type="text" readonly class="selectBox__input" />
  <span class="selectBox__upArrow glyphicon glyphicon-chevron-up"></span>
  <span class="selectBox__downArrow glyphicon glyphicon-chevron-down"></span>
</div>


var selectData = [ "Pakistan","Palau","Palestinian", "Territories","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal"];

var counter = 0;
var currentElement = selectData[counter];

$('.selectBox__input').val(currentElement);

$('.selectBox__upArrow').on("click",function() {
  if (counter > 0) {
    counter--;
  }
  sel(counter);
});

$('.selectBox__downArrow').on("click",function() {
  if (counter < selectData.length - 1) {
    counter++;
  }
  
  sel(counter);
});

function sel(counter) {
  currentElement = selectData[counter];
  $('.selectBox__input').val(currentElement);
}
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <style>
      @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);

      .selectBox {
        margin: 250px;
        position: relative;
      }

      .selectBox__input {
        padding: 20px;
        border: 2px solid #0088cc;
        z-index: 1;
        font-family: "Open sans";
        font-size: 20px;
        background: #e6f7ff;
      }

      .selectBox__upArrow, .selectBox__downArrow {
        color: #069;
        position: absolute;
        -webkit-transform: scale(2);
        transform: scale(2);
        left: 240px;
        cursor: pointer;
        z-index: 9999;
      }

      .selectBox__upArrow {
        top: 8px;
      }
      .selectBox__downArrow {
        top: 48px;
      }
    </style>
  </head>
  <body>
    <div class="selectBox">
      <input type="text" readonly class="selectBox__input" />
      <span class="selectBox__upArrow glyphicon glyphicon-chevron-up"></span>
      <span class="selectBox__downArrow glyphicon glyphicon-chevron-down"></span>
    </div>
  </body>
</html>

http://codepen.io/shezk/pen/NxZgeE

Upvotes: 0

Views: 408

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29307

There are many way to do this and there is no right or wrong.

Here is one:

The logic is to set the input's color to transparent (using .addClass('out') and add css-transition to the input so it will animate), wait 300ms (for example), set the value of the input and .removeClass('out') will remove the class and return (with transition) the color to the value he was.

Let me know if something is not clear.

var selectData = [ "Pakistan","Palau","Palestinian", "Territories","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal"];

var counter = 0;
var currentElement = selectData[counter];

$('.selectBox__input').val(currentElement);

$('.selectBox__upArrow').on("click",function() {
  if (counter > 0) {
    counter--;
  }
  sel(counter);
});

$('.selectBox__downArrow').on("click",function() {
  if (counter < selectData.length - 1) {
    counter++;
  }

  sel(counter);
});

function sel(counter) {
  currentElement = selectData[counter];

  var input = $('.selectBox__input').addClass('out');
  setTimeout(function() {
    input.val(currentElement).removeClass('out');
  }, 300);
}
input {
  -webkit-transition:all .3s ease;  
  transition:all .3s ease;
}

.out {
  color:transparent;  
}
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <style>
      @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);

      .selectBox {
        margin: 250px;
        position: relative;
      }

      .selectBox__input {
        padding: 20px;
        border: 2px solid #0088cc;
        z-index: 1;
        font-family: "Open sans";
        font-size: 20px;
        background: #e6f7ff;
      }

      .selectBox__upArrow, .selectBox__downArrow {
        color: #069;
        position: absolute;
        -webkit-transform: scale(2);
        transform: scale(2);
        left: 240px;
        cursor: pointer;
        z-index: 9999;
      }

      .selectBox__upArrow {
        top: 8px;
      }
      .selectBox__downArrow {
        top: 48px;
      }
    </style>
  </head>
  <body>
    <div class="selectBox">
      <input type="text" readonly class="selectBox__input" />
      <span class="selectBox__upArrow glyphicon glyphicon-chevron-up"></span>
      <span class="selectBox__downArrow glyphicon glyphicon-chevron-down"></span>
    </div>
  </body>
</html>

Upvotes: 1

Related Questions