使用javascript中的内容滑动创建翻转内容

Question

我正在学习javascript，我想在你点击滑动的容器时滑动不同的div容器，同时翻转每个滑动div容器内的内容。

我已经按照gliding content中显示的示例创建了一个内容滑动div，我还有一个使用flipping content中提供的链接来移动内容的示例。我已经整合了它们，但内容的翻转似乎不起作用，当我尝试单独执行它时，它工作正常。

对此有任何帮助都会感激不尽，

谢谢

的 的 **编辑* * * 我不知道如何使用jsfiddle，但有些如何做到这一点，因为我不知道如何在js中制作文件夹并放置我的文件，javascript和css没有对源文件的引用，任何有关这方面的帮助将是感激<登记/> 基本想法如我link，

所示

Answer 1

如果你需要做自定义的东西，最好学习CSS3而不是尝试使用插件。 MDN有关于CSS3 transitions（动画）和transformations的优秀文章（对于翻转，它是你想要的3D旋转）。

这是一个同时滑动/翻转的演示（仅限Webkit;您必须添加其他供应商前缀才能使其在Firefox，IE等上运行）。

Demo

<强> HTML

<div class="container">
    <img src="http://lorempixel.com/400/200/food/1/" />
    <img class="slider" src="http://lorempixel.com/400/200/food/2/" />
</div>

<input value="flip" id="flip" type="button" />
<input value="slide" id="slide" type="button" />
<input value="both" id="both" type="button" />

<强> CSS

.container { 
    width: 400px;
    height: 200px;
    overflow: hidden;
}
.slide {
  margin-top: -200px;  
}
.flip {
    -webkit-transform: rotate3d(0,1,0,90deg);
}
img {
    -webkit-transition: all 2s;
}
div {
    -webkit-transition: all 1s;
}

的 JS

var stop = false;
$(".container").each(function(i,e) {
    e.addEventListener('webkitTransitionEnd', function(e) {
    if (stop === false) {
        $(this).toggleClass("flip");    
        stop = true;
    }
    });
});

function flip(e) { 
    stop = false;
    $(".container").toggleClass("flip"); 
}
function slide() { 
    $(".slider").toggleClass("slide"); 
}
function both() {
    flip();
    slide();
}

$(document).on("click", ".container", function() {
    flip.call(this);
    slide(this);
});

$("#flip").click(flip);
$("#slide").click(slide);
$("#both").click(both);