Geek Answers Handbook

Jquery delays connection from following

I have a short CSS-based animation that I want to play before the link follows (the map that pops up to the page loads gets thrown after a click). However, the page is currently loading too fast. I want to be able to briefly defer href from following.

Here is what I have:

$(document).ready(function() {
    $("#card").css("top","0px");
    $(".clickit").click(function() {
        $("#card").css("top","-500");
    });
});

The first line imposes a map on the page load. After that, a click is called that modifies the CSS, but, as I said, there should be some delay because the page loads immediately, and not after the animation. The modified CSS is as follows:

#card {
  width: 400px;
  height: 500px;
  position: relative;
  top: -500px;
  -webkit-transition:all .5s;
}

(yes, I know this is only webkit)

, 2008 , , jQuery , , .

!

+5
3

.css() -webkit-transition:, setTimeout() .

: http://jsfiddle.net/2WJH9/

$(document).ready(function() {
    $("#card").css("top","0px");
    $(".clickit").click(function() {
        $("#card").css("top","-500px");  // Added px to make it work, 
                                         //   or get rid of quotes -500
        var href = $(this).attr('href');

             // Delay setting the location for one second
        setTimeout(function() {window.location = href}, 1000);
        return false;
    });
});​

setTimeout() window.location 1 (1000 ). .5 -webkit-transition:, 500.

+11

Default() , jQuery CSS, .

$('.clickit').click(function(e) {
    e.preventDefault();
    href = $(this).attr('href');
    $('#card').animate( { top: '-500px' }, 500, function() {
        window.location = href;
    });
});
+5

This is a problem very similar to this question since 2008, but I know that jQuery has been updated significantly since then, so I wanted to see if there was a more modern solution.

No, all the same answer. Cancel the event, then load it later.

+2
source

More articles:


All Articles