jQuery 将正面翻转到 2 个不同的背面

Question

我无法使用某个功能。

如您所见：https://jsfiddle.net/y5jn4tco/1/

<div> CHECK CODE AT JSFIDDLE</div>

我正在使用 flip jquery 插件进行翻转，您可以在其中选择一个类别，然后发送到某个登录屏幕。我的问题是，我希望底部的翻转到另一个背面。我曾尝试更改 jquery 插件，但没有成功。有谁知道我该怎么做吗？

所以粉色的去粉色登录，蓝色的去蓝色登录。

提前致谢！

Answer 1

对您的 document.ready 函数进行了一些更改，如下所示：

这里是DEMO

$(document).ready(function(){
    $(".cards").flip({
        trigger: 'manual'
    });

    $("#loginStudent").click(function(){

    $(".cards").flip(true);      
        $("#centerModuleStudent").css('display','block');
        $("#centerModuleCompany").css('display','none');

    });
    $("#loginCompany").click(function(){

       $(".cards").flip(true);        
        $("#centerModuleCompany").css('display','block');
        $("#centerModuleStudent").css('display','none');

    });

    $("#back1,#back2").click(function(){
        $(".cards").flip(false);

    });
});

我注意到后退按钮的 ID 相同，这违反了 DOM 元素规则，因此我已将其分别更改为 back1 和 back2，我只是隐藏了单击每个按钮并显示所需的 div

的备选方案 div

您的 CSS 变化：

#back1,#back2 {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 20px;
    cursor: pointer;
}

Answer 2

我把学生和公司包进Main Div我也旋转Main Div#centerMain Front 和Back 然后如果你点击学生然后公司表格隐藏和学生显示在 Div#centerMain

如果您在公司中单击，则隐藏学生表单并在 Div#centerMain

中显示公司

然后我将#back 更改为.back

I Solve This In Fork Try This

https://jsfiddle.net/ehab6sqs/

Answer 3

你需要把你的 Div 换成另一个 Div 然后向后翻转 Div 到前面和从前面到后面 1 div 是 A 2 div 是 B A-> 1 学生 2 公司 B -> 2个按钮如果单击 btn1 然后隐藏公司并翻转

 $("#centerModuleCompany").css('display','none');
    $("#centerModuleStudent").css('display','block');

如果单击 btn1 然后隐藏学生并翻转

  $("#centerModuleCompany").css('display','block');
        $("#centerModuleStudent").css('display','none');

jQuery 将正面翻转到 2 个不同的背面

jQuery Flip front to 2 different backsides

javascript

jquery

animation

login

flip