logo标签列表

悬浮在一个元素上将导致它动画而不仅是改变其CSS属性。

javascriptjquerycss
3
在此URL上的代码中： http://jsfiddle.net/y5nqyucs/8/ 
div#column {
    top:0px;
    bottom: 0px;
    position: fixed;
    border: 1px solid greenyellow;
    display: block;
    overflow: hidden;
    width: 296px;
    box-shadow: 0px 0px 3px 4px black;
}
div.background {
    background: black;
    opacity: .75;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left:0px;
    right: 0px;
    z-index: -1;
}
#carousel {
    border: 1px solid cyan;
    margin: 35px auto 0px;
    position: relative;
    top: 0px;
    padding:0px;
    background: #000;
}

#carousel .carouselunit {
    display: block;
    border: 1px solid burlywood;
    position: relative;
    height: 200px;
    width: auto;
}

#carousel .carouselunit .flipcard {
    border: 1px dashed pink;
    transform-style: preserve-3d;
}

#carousel .carouselunit .flipcard img {
    top: 0px;
    left: 0px;
    border: 1px solid yellow;
    transform: translateZ(1px);
}

#carousel .carouselunit .flipcard .backpane {
    display: inline;
    border: 2px solid gray;
    height: 200px;
    position: absolute;
    transform: translateZ(0px) rotateY(180deg);
    color: #fff;
    background: rgb(0,0,0); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(53,57,58,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(53,57,58,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(53,57,58,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(53,57,58,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(53,57,58,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(53,57,58,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#35393a',GradientType=0 ); /* IE6-9 */
    top: 0px;
    left: 0px;
}
.backpane p,
.backpane a {
    margin: 1em;
}

div.up {
    position: absolute;
    width: 100%;
    top: 0px;
    height: 35px;
    z-index: 2;
    background: #484848;
    text-align: center;
}
div.up:hover {
    background-color: #aaa;
}
div.down {
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 35px;
    z-index: 2;
    background: #484848;
    text-align: center;
}
div.down:hover {
    background-color: #aaa;
}


<body>


    <div id="column">
        <div class="up">
            <img src="./resources/images/up.png" alt="up arrow"/>
        </div>
        <div id="carousel">
            <div class="carouselunit">
                <div class="flipcard">
                    <img src="./resources/images/one.png" height="200"/>
                    <div class="backpane">
                        <p> Some example text, some example text, some example text... </p>
                        <a href="#" class="done">Done...</a>
                        <a href="#" class="done">Link</a>
                    </div>
                </div>
            </div>
            <div class="carouselunit">
                <div class="flipcard">
                    <img src="./resources/images/two.png" height="200"/>
                    <div class="backpane">
                        <p> Some example text, some example text, some example text... </p>
                        <a href="#" class="done">Done...</a>
                    </div>
                </div>
            </div>
            <div class="carouselunit">
                <div class="flipcard">
                    <img src="./resources/images/three.png" height="200"/>
                    <div class="backpane">
                        <p> Some example text, some example text, some example text... </p>
                        <a href="#" class="done">Done...</a>
                    </div>
                </div>
            </div>
            <div class="carouselunit">
                <div class="flipcard">
                    <img src="./resources/images/four.png" height="200"/>
                    <div class="backpane">
                        <p> Some example text, some example text, some example text... </p>
                        <a href="#" class="done">Done...</a>
                    </div>
                </div>
            </div>
            <div class="carouselunit">
                <div class="flipcard">
                    <img src="./resources/images/five.png" height="200"/>
                    <div class="backpane">
                        <p> Some example text, some example text, some example text... </p>
                        <a href="#" class="done">Done...</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="down">
            <img src="./resources/images/down.png" alt="down arrow"/>
        </div>
        <div class="background"></div>
    </div>

    <!-- End Carousel -->

</body>

$(document).ready(function(){
var right = $(window).width()/2+629/2;

$("#column").css({
    right: right
});
var scrollDifference;
var justScrolled = false;
$(".up").click(function(){
    scrollDifference = $("#carousel").height() - $("#column").height();
    if((scrollDifference > 0) && ($("#carousel").position().top < 0)){
        $(".flipcard").css({
            position: "static",
            transform: "rotateY(0deg)",
            transitionDuration: "1s",
            height: "200px",
            zIndex: "1"
        });
        $(".flipcard > img").css({
            height:  "200px",
            width: "295px"
        });
        $("#carousel").animate({
            top: "+=200"
            }, 150, function(){
        });
    }
    $("div").removeClass(".hoverNowFixed");
    justScrolled = true;
});
$(".down").click(function(){
    scrollDifference = $("#carousel").height() - $("#column").height();
    if((scrollDifference > 0) && ($("#carousel").position().top === -scrollDifference) || ($("#carousel").position().top > -scrollDifference)){
        $(".flipcard").css({
            position: "static",
            transform: "rotateY(0deg)",
            transitionDuration: "1s",
            height: "200px",
            zIndex: "1"
        });
        $(".flipcard > img").css({
            height:  "200px",
            width: "295px"
        });
        $("#carousel").animate({
            top: "-=200"
            }, 150, function(){
                $("#carousel").stop();
            });
        $("div").removeClass(".hoverNowFixed");

        justScrolled = true;
    }
});

$("#carousel .carouselunit .flipcard").hover(
    function(){

        if($(this).hasClass(".selected")){
        }
        if(!$(this).hasClass(".selected")) {
            var verticalPosition = $(this).offset().top - 25;
            var horizontalPosition =  $(this).offset().left - 25;

            if(justScrolled){
                console.log('up/down button was hit and now flipcard is hovered on');
                $(this).addClass("hoverNowFixed");
                $(this).css({
                position: "fixed",
                zIndex: "2",
                top: verticalPosition,
                left: horizontalPosition,
                height: "230px",
                width: "340px"
                });
                $(this).children("img", ".backpane").css({
                    top: verticalPosition,
                    left: horizontalPosition,
                    height: "230px",
                    width: "340px"
                });
                console.log(verticalPosition);
                console.log(horizontalPosition);
            }
            if(!justScrolled) {
                console.log('flipcard is hovered on');
                $(this).addClass("hoverNowFixed");
                $(this).css({
                position: "fixed",
                zIndex: "2",
                top: verticalPosition,
                left: horizontalPosition,
                height: "230px",
                width: "340px"
                });
                $(this).children("img", ".backpane").css({
                    top: verticalPosition,
                    left: horizontalPosition,
                    height: "230px",
                    width: "340px"
                });
                console.log(verticalPosition);
                console.log(horizontalPosition);
            }
        }

    },
    function(){

        if($(this).hasClass(".selected")) {

        }
        if(!$(this).hasClass(".selected") && $(this).css("position") === "fixed") {
            var verticalPosition = $(this).offset().top + 25;
            var horizontalPosition =  $(this).offset().left + 25;
            console.log(verticalPosition);
            console.log(horizontalPosition);
            $(this).css({
                position: "fixed",
                zIndex: "1",
                top: verticalPosition,
                left: horizontalPosition,
                height: "200",
                width: "295"
            });
            $(this).children("img", ".backpane").css({     
                top: verticalPosition,
                left: horizontalPosition,
                height: "200",
                width: "295"
            });

            $(this).children(".backpane").css({
                position: "absolute"
            });


        }
        if(!$(this).hasClass(".selected") && $(this).css("position") === "static") {
            var verticalPosition = $(this).offset().top + 25;
            var horizontalPosition =  $(this).offset().left + 25;
            console.log(verticalPosition);
            console.log(horizontalPosition);
            $(this).css({
                position: "fixed",
                zIndex: "1",
                top: verticalPosition,
                left: horizontalPosition,
                height: "200",
                width: "295"
            });
            $(this).children("img", ".backpane").css({     
                top: verticalPosition,
                left: horizontalPosition,
                height: "200",
                width: "295"
            });

            $(this).children(".backpane").css({
                position: "absolute"
            });


        }
});

$("#carousel .carouselunit .flipcard").click(function(){
    if($(".selected").length === 0){
        $(this).addClass("selected");
        $(this).animate({
            top: "250px",
            left: "700px"
        }, 110, function(){
            $(this).animate({
                width: "700px",
                height: "450px"
            }, 250);
            $(this).css({
                position: "fixed",
                transform: "rotateY(180deg)",
                transitionDuration: "250"
            });
        });
        $(this).children(".backpane").animate({
            width: "700px",
            height: "450px"
        });
    }
    else {
        $(".flipcard.selected").css({
            position: "absolute",
            top: "0px",
            left: "0px"
        });
        $(".flipcard.selected img", ".flipcard.selected .backpane").css({
            width: "295px",
            height: "200px"
        });
        $(".selected").removeClass("selected");

        $(this).css({
           position: "fixed" 
        });
        $(this).animate({
            top: "250px",
            left: "700px"
        },250);
        $(this).css({
            transform: "rotateY(180deg)",
            transitionDuration: "1s"
        });
        setTimeout(function(){$(this).addClass("selected");},100);
    }
}); 
});

我有几个盒子，里面有一张图片，它们位于两个灰色盒子之间，一个在顶部，另一个在底部。
当我悬停在图像框上时，它会稍微变大，悬停离开后它会恢复到原始大小。一旦我点击下面的灰色框（作为滚动条查看视口下面的更多框），然后再次悬停在任何图像框上；它会"动画"成一个更大的框。如果我继续悬停在翻转卡片元素上，它会动画地向右下方移动。这是发生的两个不良效应。
我希望它（翻转卡片）不要"动画"成一个更大的框和更小的框，我只想让CSS更改使其立即变大并返回到原始大小，并回到其各自父级（carouselunit）中的位置，就像我在点击底部灰色框之前所做的那样。
1
您的fiddle中没有图片。您需要将它们托管在某个地方并绝对链接到它们。 - lharby
我在我的代码示例中绝对链接了图片。 - ACoder
1
如果以下答案对您不起作用，请尝试将您的jsFiddle和帖子中的代码减少到仅需要的最小代码。然后我们可以更轻松地查看它，以查看可能出错的地方。发布整个项目会让人们不愿花时间为您解决问题。自己做好准备，节省我们的麻烦。 - Phil Tune
我会记住的。谢谢。 - ACoder
1个回答
1
您正在更改属性。你在这里想要实现什么目标：
transform: "rotateY(0deg)",
transitionDuration: "1s",
当我点击元素“.down”时，它应该将所有翻转卡片转换或翻转回到原始面（显示一开始看到的图像），并将它们放回其“.carouselunits”中。是什么让它开始翻转——在每个翻转卡片上注册的单击事件处理程序。去掉过渡持续时间属性解决了这个问题。谢谢。 - ACoder
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接