将鼠标悬停在元素上会导致它进行动画处理，而只是更改其 CSS 属性
Hovering over an element causes it to animate rather just change its CSS properties
在我在这个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 更改使其变大并立即恢复到其原始大小并回到其在相应父级(轮播单元(中的位置，就像我单击底部灰色框之前所做的那样。
您正在更改属性。你想在这里完成什么：
transform: "rotateY(0deg)",
transitionDuration: "1s",
相关文章：
- 使用自定义数据属性或将数据绑定到处理程序来处理事件
- 如何处理 getJSON 调用上的“未捕获类型错误:无法设置未定义的属性'prop'”
- 有没有更好的方法来处理窗口属性&React/Redux中的子组件
- 替换不处理数据属性值
- 句柄中包含括号的问题处理属性
- 如何在更改的事件处理程序中忽略Polymer元素上默认属性的初始覆盖
- 正在获取丢失的错误处理程序套接字消息，无法读取属性'timerID'使用Node.js和Socket.i
- 更改 innerHTML 属性时处理程序会发生什么情况
- xml获取属性javascript不会;无法处理childNodes
- 处理“无法读取 null 的属性”错误
- 从充当事件处理程序的多个方法引用对象属性
- 使用Spine.Model.Ajax，如何在模型更新时处理响应的JSON中的额外属性
- 删除节点的内联事件处理程序/属性
- 为什么当同级节点的“display”属性发生更改时，React 组件的 onClick 事件处理程序不会触发
- 如何处理 redux 存储所持有的数据中不断变化的属性
- 如何处理未定义属性的未定义属性 javascript 类型错误
- 单击的元素的 grab 属性 - 使用单击事件处理程序
- 未调用通过 onclick 属性分配的处理程序
- 原型方法中的事件处理程序函数，为什么它认为.keyCode是JavaScript中未定义的属性
- 处理属性的 JSON 到 XML 转换器 - javascript
