Hovering over an element makes it animate, but just change its CSS properties
In the code I have at this 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);
}
});
});
I have several boxes with an image inside them, which are between two gray boxes, one gray box at the top, the other at the bottom.
Hovering over the image boxes makes it a bit large and hovering makes it return to its original size. As soon as I click on the bottom gray square below it (which acts like a scroller to see more fields below the viewport) and then hover over any of the image fields again; he "animates" into a large box instead. If I keep hovering over the flippar element, it animates so that it continues to move in the lower right direction. These are two undesirable effects.
I want it (flipcard) not to "animate" into a big box and a smaller box, I just want a change in the CSS to make it increase in size and return to its original size instantly and return to its place in the corresponding parent (carouselunit). as it was before I clicked on the bottom gray box.
+3
source to share