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

Hide Object and show it by click

本文关键字：单击 显示 对象 隐藏      更新时间：2023-09-26

我这里有三个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 行上不透明度，你就会明白我的意思。

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

它应该看起来像这样：

.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清除在.active中找到的opacity:1，因为 css 类从上到下都是红色的。使用此新代码，第一张幻灯片 （.active） 现在具有 100% 的不透明度。

小提琴

相关文章：