Question

我这里有三个div框，我将其包含在旋转脚本中。

因此，如果有人点击右键，它将显示下一个div框。我遇到的问题是它向我展示了所有3个盒子。你可以在这看到。所以他们互相叠加。

如何通过单击按钮向我显示一个和另一个？

    $(document).ready(function(){

//===== Apps slider script =====

    var angle = 0;

$('.slider .slide:odd').css({
    "-webkit-transform": "rotateY(180deg)",
    "-moz-transform": "rotateY(180deg)",
    "-o-transform": "rotateY(180deg)",
    "-ms-transform": "rotateY(180deg)",
    "transform": "rotateY(180deg)"

   /* "-moz-transform": "scaleX(-1)",
    "-o-transform": "scaleX(-1)",
    "-webkit-transform": "scaleX(-1)",
    "-ms-transform": "scaleX(-1)",
    "transform": "scaleX(-1)"*/

});

function sliderResize(){
    if ($(window).width() <= 550) {
        $('.appsblock .apps .slider').css("min-height", $(window).width() + 100);
    }
}

$('.slider .navigation-right').click(function(){
    if ($(this).parent().find('.active').is(':last-child') == false) {
        angle = angle - 180;
        var angledeg = 'rotateY(' + angle + 'deg)';

        $(this).parent().find('.rotator').css({
            "-webkit-transform": angledeg,
            "-moz-transform": angledeg,
            "-o-transform": angledeg,
            "-ms-transform": angledeg,
            "transform": angledeg
        });
        $(this).parent().find('.active').next().toggleClass('active');
        $(this).parent().find('.active:first').toggleClass('active');

    }
});

$('.slider .navigation-left').click(function(){

    if ($(this).parent().find('.active').is(':first-child') == false) {
        angle = angle + 180;
        var angledeg = 'rotateY(' + angle + 'deg)';

        $(this).parent().find('.rotator').css({
            "-webkit-transform": angledeg,
            "-moz-transform": angledeg,
            "-o-transform": angledeg,
            "-ms-transform": angledeg,
            "transform": angledeg
        });
        $(this).parent().find('.active').prev().toggleClass('active');
        $(this).parent().find('.active:last').toggleClass('active');
    }

});

http://jsfiddle.net/mK8LL/5/

我在第540行添加了一个不透明度：0，这是在我的旧方面，它在那里工作。如果你在css部分的第540行采取不透明度，你将看到我的意思。

Answer 1

你只需要反转你的课程。在 .appsblock .apps .slider .rotator .active下设置.appsblock .apps .slider .rotator .slide 。

它应该是这样的：

.appsblock .apps .slider .rotator .slide { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -ms-backface-visibility: visible; left: 0; width: 100%; position: absolute; opacity: 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .appsblock .apps .slider .rotator .active { opacity: 1; }

opacity:0删除opacity:1中找到的.active因为css类从上到下是红色的。使用这个新代码，第一张幻灯片（.active）现在是100％不透明度。

Fiddle

隐藏对象并通过单击显示它

1 个答案: