Readplace

JSFiddle - React, Tailwind, and code Playground

JSFiddle ~1 min read
View original
  • best

This article is too short to summarise.

by Fagner Brack

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<img class="image" src="http://placehold.it/30x30" onclick="clickImageA(this)">
<img class="image" src="http://placehold.it/30x30" onclick="clickImageB(this)">
<img class="image" src="http://placehold.it/30x30" onclick="clickImageC(this)">

CSS

.image {
  width: 30px;
  height: 30px;
  border: 5px solid green;
  transform: scale(1);
  transition: all .5s;
}

.zoomify {
    transform: scale(2) !important;
}

JavaScript

function stepFor(element, method) {
  const methodArgs = [].slice.call(arguments, 2);
  return function(next)  {
    method.apply(element, methodArgs);
    next();
  };
}
function clickImage() {
  const image = $(this);
  $({})
    .queue(stepFor(image, image.addClass, 'zoomify'))
    .delay(1000)
    .queue(stepFor(image, image.removeClass, 'zoomify'));
};
$('.image').on('click', clickImage);

Please Whitelist JSFiddle in your content blocker.

Help keep JSFiddle free for always by one of two ways:

  • Whitelist JSFiddle in your content blocker (two clicks)
  • Go PRO and get access to additional PRO features →

Join the 4+ million users, and keep the JSFiddle dream alive.

  • Ad-free

    All ads in the editor and listing pages are turned completely off.

  • Use pre-released features

    You get to try and use features (like the Palette Color Generator) months before everyone else.

  • Fiddle collections

    Sort and categorize your Fiddles into multiple collections.

  • Private collections and fiddles

    You can make as many Private Fiddles, and Private Collections as you wish!

  • Console

    Debug your Fiddle with a minimal built-in JavaScript console.