0

嗨，我有以下 js 代码：

$(function () {
    if ($('html').hasClass('csstransforms3d')) {    

        $('.thumb').removeClass('scroll').addClass('flip');     

        $('.thumb.flip').hover(
            function () {

                $(this).find('.thumb-wrapper').addClass('flipIt');
            },
            function () {
                $(this).find('.thumb-wrapper').removeClass('flipIt');           
            }
        );

    } else {

        $('.thumb').hover(
            function () {
                $(this).find('.thumb-detail').stop().animate({bottom:0}, 500, 'easeOutCubic');
            },
            function () {
                $(this).find('.thumb-detail').stop().animate({bottom: ($(this).height() * -1) }, 500, 'easeOutCubic');          
            }
        );

    }
});

代码所做的基本上是每当光标悬停在其上时翻转 div 区域。

我想改变这部分

$('.thumb.flip').hover( ... rest of code goes here ...

点击行为。我曾尝试同时使用单击和切换，但它不起作用。

我试过使用这个解决方案但没有运气：

$('.thumb.flip').click(
    function () {

        $(this).find('.thumb-wrapper').toggleClass('flipIt');
    },

$('.thumb.flip').on('click',
    function () {

        $(this).find('.thumb-wrapper').toggleClass('flipIt');
    },

$('.thumb.flip').toggle(
function () {

    $(this).find('.thumb-wrapper').addClass('flipIt');
}

有谁知道这是为什么？

编辑：

为了清楚起见，我想要的是当用户单击 div 而不是悬停时使 div 翻转。

这是我的 CSS

.thumb {
    display:block;
    width:200px;
    height:140px;
    position:relative;
    margin-bottom:20px;
    margin-right:20px;
    float:left;
}

    .thumb-wrapper {
        display:block;
        width:100%;
        height:100%;
    }

    .thumb img {
        width:100%;
        height:100%;
        position:absolute;
        display:block;          

    }

    .thumb .thumb-detail {
        display:block;
        width:100%;
        height:100%;
        position:absolute;          
        background:#fff;        
    }


/*
* Without CSS3 Scroll Up Effect
*/
.thumb.scroll {
    overflow: hidden;
}   

.thumb.scroll .thumb-detail {
    bottom:-280px;
}

/*
* CSS 3D Card Flip Effect
*/  
.thumb.flip {
    perspective:800px;
}

.thumb.flip .thumb-wrapper {
    transition: transform 1s;
    transform-style: preserve-3d;           
}

.thumb.flip .thumb-detail {
    transform: rotateY(-180deg);                        
}

.thumb.flip img,
.thumb.flip .thumb-detail {
    backface-visibility: hidden;
}

.thumb.flip .flipIt {
    transform: rotateY(-180deg);            
}
4

4 回答 4

0

要在单击时切换类，只需使用 toggleClass ：

$('.thumb.flip').on('click', function () {
    $(this).find('.thumb-wrapper').toggleClass('flipIt');
});
于 2013-08-14T10:02:42.727 回答
0

您可以像这样切换类：

$('.thumb.flip').click(function () {
    $(this).find('.thumb-wrapper').toggleClass('flipIt');
});

http://api.jquery.com/toggleClass/

于 2013-08-14T10:02:58.130 回答
0

您需要结合click和toggleClass功能：

$('.thumb.flip').click(function () {
    $(this).find('.thumb-wrapper').toggleClass('flipIt');
});

flitIt这应该在.thumb-wrapper内部切换类.thumb.flip。

于 2013-08-14T10:03:19.213 回答
0 
$('.thumb.flip').click(function(){
  $(this).find('.thumb-wrapper').toggleClass('flipIt');
});
于 2013-08-14T10:03:45.717 回答