0

我有以下代码，鼠标悬停时会隐藏图像并在下面显示 div 的内容，一旦单击 div，它会将您带到另一个页面。鼠标悬停不适用于平板电脑等，因此我将悬停更改为单击以显示 div 内容，而不是悬停。但是，当我将悬停更改为单击时，会显示 div，然后通过一个操作进入下一页。我需要点击两次。谁能建议我如何实现这一目标？

提前谢谢了。

$(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');  
    });

});
4

1 回答 1

0

如果$.hover()用 click 替换，则必须将最后一个替换为$.click，$.dblclick否则会同时触发两个 click 处理程序。

于 2013-02-01T12:44:01.003 回答