Member Avatar for Amit_15

I have created a elevator functionality [there are 2 floors and corresponding to each one , there is a checkbox. Depending upon which checkbox is checked, the elevator shud move to that floor.

Only thing which i am not able to implement here is:

Make the checkbox check automatically and slowly fadeout to unchecked state when the orange elevator has reached that checkbox.

Here is the link to the markup and script: http://jsfiddle.net/hurricaneankit/qR4uJ/

  • 3 Contributors
  • 2 Replies
  • 279 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by theHop

Dani AI

Generated

Native checkboxes are boolean (checked or not) and the checked property itself can’t be animated. A reliable approach that preserves accessibility is to keep the native input for semantics, hide its default appearance, draw the visible checkmark with CSS (a label::after pseudo-element) and animate that visual layer. When the elevator arrives: set the input checked, add a CSS class that triggers an opacity transition on the pseudo-element, then on transitionend uncheck the input and remove the class. That produces a smooth “checked → visually fades away → unchecked” effect while keeping keyboard/screen-reader behavior intact.

Minimal pattern (markup, CSS and jQuery trigger):

<input id="floor1" type="checkbox">
<label for="floor1" class="chk">Floor 1</label>
/* hide native box but keep it in DOM */
input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;}
label.chk{position:relative;padding-left:26px;cursor:pointer;}
label.chk:before{content:"";position:absolute;left:0;top:0;width:18px;height:18px;border:1px solid #ccc;background:#fff;}
label.chk:after{content:"";position:absolute;left:5px;top:2px;width:7px;height:12px;border-right:2px solid #f60;border-bottom:2px solid #f60;transform:rotate(45deg);opacity:0;transition:opacity .9s linear;}
input[type=checkbox]:checked + label.chk:after{opacity:1;}
label.chk.fading:after{opacity:0;}
function fadeUncheck($cb){
  $cb.prop('checked', true);
  var $lab = $cb.next('label.chk');
  $lab.addClass('fading').one('transitionend webkitTransitionEnd oTransitionEnd', function(){
    $cb.prop('checked', false);
    $lab.removeClass('fading');
  });
}

Notes and troubleshooting: ensure the CSS rule order so .fading:after overrides :checked:after; include vendor prefixes or multiple transitionend event names for older browsers; cancel an in-progress fade by removing the class and unbinding the transition handler if the elevator reverses; keep the native input in the DOM for keyboard focus and screen readers. This complements the quick jQuery fixes suggested by and the rebuild by by adding an accessible visual fade step before toggling the checked state.

Recommended Answers

All 2 Replies

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.