Question

我这里有一个jsfiddle - http://jsfiddle.net/r3thre5q/6/

我的图片中隐藏着文字。

当您将鼠标悬停在图片上时，我想显示该文字。

我可以将图像淡出并滑出图像。

我也喜欢这样做，图片翻转显示文字。

我在这里使用本教程http://davidwalsh.name/css-flip使用css，但我似乎无法使用jQuery。

如何在jQuery中使用此翻转效果。

    $(function () {

        $(".fade").hover(function () {
            $('.info-front').fadeTo('fast', 0.2);
        }, function () {
            $('.info-front').fadeTo('fast', 1);
        });

        $(".slide").hover(function () {
            $('.info-front').animate({bottom:'-300px'});
        }, function () {
            $('.info-front').animate({bottom:'0'});
        });

        $(".flip").hover(function () {
            $('.info-block').css('transform', 'rotateY(180deg)');
        }, function () {
            $('.info-block').css('transform', 'rotateY(180deg)');
        });

    })

Answer 1

我编辑了一些代码。您需要为文本播放更多内容。请在此处查看：http://jsfiddle.net/r3thre5q/8/

我已经更改了$ .hover添加0deg

$(".flip").hover(function () {
  $('.info-block').css('transform', 'rotateY(180deg)');
}, function () {
  $('.info-block').css('transform', 'rotateY(0deg)');
});

我也改变了css：

.flip {
  transition: 0.6s;
  transform-style: preserve-3d;
}

Jquery翻转效果

1 个答案: