Question 285375 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Can I add a delay on clicking a url, then zoom the image without going small again?

I’ve got an image on a page, which is linked to a project page – I’ve got it set to zoom in and blur on focus which is working really well, but it shrinks back down. Ideally id want it to stay zoomed and blured, then the click fires so the page changes, without the user seeing the image shrink back down.

This is my current code:

.project-zoom {
    transition: transform 1s, filter 1s ease-in-out;
    margin: 0 auto;
}
    
.project-zoom:active {
    -ms-transform: scale(10); /* IE 9 */
    -webkit-transform: scale(10); /* Safari 3-8 */
    transform: scale(10);
    filter: blur(2px);
}

So firstly, I need to add a delay so that when I click the image it does the image zoom first.
Then once the image has zoomed, I want it to stay zoomed.

Is it possible?
I’m guessing I’ll need to add a delay to the click with js or jquery, although if its possible in css then that would be much better.

Tags:

2

Answers


  1. 0

    If you want to make it stay, then you should add :focus instead of :active on .project-zoom class

    .project-zoom {
    transition: transform 1s, filter 1s ease-in-out;
    margin: 0 auto;
}
    
.project-zoom:focus {
    -ms-transform: scale(10); /* IE 9 */
    -webkit-transform: scale(10); /* Safari 3-8 */
    transform: scale(10);
    filter: blur(2px);
}
    Login or Signup to reply.
  2. 0

    As per Taufik’s answer if you want it to stay use :focus.

    If you also need a delay on following the link you can do this with JS by replacing the link’s default behaviour with one which waits for transition to complete:

    const projectzoom = document.querySelector(".project-zoom");

projectzoom.addEventListener("click", (e) => {
  e.preventDefault();//dont follow link
  projectzoom.addEventListener("transitionend", ontransitionend);//listen for transition end
});

function ontransitionend(e){
  if(e.propertyName == "transform"){//if our transform has ended (you have two - transform and filter)
    projectzoom.removeEventListener("transitionend", ontransitionend);//remove the listener
    console.log(`Transition has completed. Redirect to ${e.target.href}`);//redirect to follow the link
    //window.location.href=e.target.href;
  }
}
    .project-zoom {
    transition: transform 1s, filter 1s ease-in-out;
    margin: 0 auto;
    display:block;
    padding:20px;
    background:#eee;
}
    
.project-zoom:focus {
    transform: scale(10);
    filter: blur(2px);
}
    <a href="#somewhere" class="project-zoom">click me</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search