Question

I have the following code which on mouse over hides the image and displays the content of the div underneath and once the div is clicked it takes you to another page. Mouse Overs dont work on tablets etc and so that instead of hover I changed the hover to a click to display the div contents. However when I change the hover to click, the div displays and then goes through to next page in one action. I need this to be two clicks. Can anyone advise on how I achieve this?

Many thanks in advance.

$(document).ready(function() {

    //Custom settings
    var style_in = 'easeOutBounce';
    var style_out = 'jswing';
    var speed_in = 1000;
    var speed_out = 250;

    //Calculation for corners
    var neg = Math.round($('.qitem').width() / 2) * (-1);  
    var pos = neg * (-1);  
    var out = pos * 2;
    var pos_h = Math.round($('.qitem').height() / 2);   

    $('.qitem').each(function () {

        //grab the anchor and image path
        url = $(this).find('a').attr('href');
        img = $(this).find('img').attr('src');

        //remove the image
        $('img', this).remove();

        //append four corners/divs into it
        $(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');

        //set the background image to all the corners
        $(this).children('div').css('background-image','url('+ img + ')');

        //set the position of corners
        $(this).find('div.topLeft').css({top:0, left:0, width:pos, height:pos_h});  
        $(this).find('div.topRight').css({top:0, left:pos, width:pos, height:pos_h});   
        $(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos, height:pos_h});
        $(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos, height:pos_h}); 

    }).hover(function () {  //change to click

        //animate the position
        $(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});
        $(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});   
        $(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});  
        $(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out}); 

    },

    function () {

        //put corners back to the original position
        $(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});  
        $(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});   
        $(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});
        $(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in}); 

    }).click (function () {

        //go to the url
        window.location = $(this).find('a').attr('href');  
    });

});

Answer 1

If you replace $.hover() with click, you must replace the last $.click with $.dblclick, otherwise the two click handlers will be triggered at the same time.