Question

我正在编写一个脚本，用于在悬停时在Y方向上旋转图像，并在90度点将图像切换到另一个图像（预期的效果是当图像悬停时，它会翻转以显示“回”方。）

我的javascript如下：

$('.designthumb').on('mouseover', function(e) {
    var x = this;
    var img = $(this).attr('src');
    var path1 = img.split('.png');
        $(x).css('-webkit-transform','rotateY(90deg)');
        $(x).css('transform','rotateY(90deg)');
        $(x).on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
            function(e) {
                if (path1[0].substr(path1[0].length - 4) == 'back') {var newpath = path1[0]+'.png';}
                else {var newpath = path1[0]+'back.png';}
                $(x).attr('src',newpath);
                $(x).css('-webkit-transform','');
                $(x).css('transform','');
                e.stopPropagation();
            });
        $(x).on('mouseout', function(e) {
            $(x).css('-webkit-transform','rotateY(90deg)');
            $(x).css('transform','rotateY(90deg)');
                $(x).on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
                function(e) {
                    if (img.split('.png')[0].substr(img.split('.png')[0] - 4) == 'back') {var imgo = img.split('back')[0]+'.png';}
                    else {var imgo = img.split('.png')[0]+'.png';}
                    $(x).attr('src',imgo);
                    $(x).css('-webkit-transform','');
                    $(x).css('transform','');
                });
            });
});

我创造了一个小提琴，但不知何故，我只是小提琴，我的小提琴永远不会正常工作，或者在这种情况下。尽管如此，您可以在此处查看我的简化尝试：http://jsfiddle.net/Xenthide/u6nauzqg/

上面的代码 SORT OF 有效，HTML非常简单，所以我不打算发布它，基本上我有一些被归类为designthumb的图像，其名称如image1.png，image2.png，带有相应的文件image1back.png image2back.png等。预期效果是用户可以将鼠标悬停在图像上并查看背面图像。

然而，只有当用户将鼠标牢牢地移动到图像上，然后完全停止移动时，它才真正起作用。否则转换会摇摆不定，不会完成，而且就像他妈的一样。我不确定当前版本是否仍在使用它，但是我的先前尝试以某种方式设法卡在后面的图像上，即使光标移开它也是如此。可能奇怪的if / else语句是我努力防止这种情况。

真的，我希望有一些方法可以在光标接触到该区域时立即转换为顺利完成，而不会出现当前令人烦恼的摇摇欲坠的废话。

非常感谢任何帮助。

Answer 1

您可以在没有javascript的情况下执行此操作： DEMO

.design {
    background:url(http://www.graphicsfuel.com/wp-content/uploads/2012/09/emoticon-sad.png) center no-repeat;
    transition: 0.2s ease-in-out;
    background-size:0 100%;
    padding:0;
    height:374px;
    width:326px;
}
.design:hover {
    width:0;
    padding:0 163px ;
    background-size:100% 100%;
}

这里有一些使用相同方法的效果的更多想法：http://codepen.io/gc-nomade/pen/Joqzp 和你尝试做的事情非常接近的翻转效果：http://codepen.io/gc-nomade/pen/cHirI

用于旋转图像并在动画中途切换图像的脚本

1 个答案: