个人中心
gpt4 book ai didi

javascript - 将鼠标悬停在一个元素上会使它产生动画，而不仅仅是改变它的 CSS 属性

转载 作者：行者123 更新时间：2023-11-29 15:36:47 26 4
gpt4 key购买 nike

在此 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);
    }
}); 
});

我有几个盒子，里面有一个图像，它们位于两个灰色盒子之间，一个灰色盒子在顶部，另一个在底部。

将鼠标悬停在图像框上会使它稍微变大，将鼠标悬停在图像框上会使它恢复到原始大小。单击其下方的底部灰色框(用作滚动条以在视口(viewport)下方查看更多框)后，然后再次将鼠标悬停在任何图像框上；它改为“动画”成一个更大的盒子。如果我一直将鼠标悬停在一个 Binder 元素上，它就会动画化，以便它继续向右下方方向移动。这是正在发生的两种不良影响。

我不希望它(事件卡片)“动画化”成一个更大的盒子和一个更小的盒子，我只想更改 CSS 使其变大并立即恢复到原来的大小并回到各自的位置parent (carouselunit) 就像我点击底部灰色框之前所做的那样。

最佳答案

您正在更改属性。你想在这里完成什么:

transform: "rotateY(0deg)",
transitionDuration: "1s",

关于javascript - 将鼠标悬停在一个元素上会使它产生动画，而不仅仅是改变它的 CSS 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27488286/

26 4 0
文章推荐： mysql - 如何在 Django 中修复 "Truncated incorrect INTEGER value: ' UUID'"
文章推荐： javascript - 从 url 字符串中删除所有空值
文章推荐： android - 改造正在返回缓存的响应
文章推荐： javascript - ng-repeat 检测第一次出现的条件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com