I need a CSS Animation to play forwards once on mouse enter and play in reverse once when mouse leaves a certain div. I have a JsFiddle here.
I need the class=".item" div to be the one that the mouse enter is triggered on.
The 'animation' is actually 4 different animations that each red line has. Each red line is also part of the ".line" css class, so I simply tell all the animations to start by modifying the ".line" class. Thanks
Here is an example how to use mouseenter and mouseleave with jquery animation.
HTML
<div class="container">
<div class="divToAnimate">
<p>test</p>
</div>
</div>
JS
$(document).ready(function(){
$(".divToAnimate").mouseenter(function(){
$(".divToAnimate").animate({left:'50px'});
});
$(".divToAnimate").mouseleave(function(){
$(".divToAnimate").animate({left:'0px'});
});
});
CSS
.container{
background-color: green;
height: 200px;
width: 200px;
float: left;
position: relative;
}
.divToAnimate{
height: 150px;
width: 150px;
background-color: red;
position: relative;
}
You can edit css with the animate function, too.
jquery animate
Related
I want a slide effect on a div from left to right or from right to left as in
$('#div').show('slide', {direction:'left'}, 1000);
being my html is
<div id="div-pre">
</div>
<div id="div">
</div>
<div id="div-nex">
</div
But the problem with this approach is that we are hiding the #div initially by setting
#div{
display:none;
}
so that we cannot preserve the width of #div
I have came across another method by making the visibility: hidden as in
$("div").css("visibility", "hidden");
to preserve the width of the div
but this method does not give the sliding effect from left to right or right to left
So I want to achieve both "the effect as in .show('slide', [option], [speed]) altogether with
preserving the div width"
Having no example code to go off, I decided to write a basic example of how you could approach this. Basically, you put an overflow: hidden container around the thing that you want to slide to the left while preserving width, and you then animate a movement leftwards using animate('left':'-pixels');. Your div has to be positioned relatively for this to work. See example below.
$(document).ready(function(){
$('.slideLeft').click(function(){
$('.slider').animate(
{'left':'-600px'},
1000,
function(){
$('.slider').hide();
}
);
});
});
.slider{
height: 300px;
width: 600px;
font-size: 20px;
background-color: yellow;
position: relative;
}
.container{
border: 1px solid red;
height: 300px;
width: 600px;
background-color: silver;
overflow: hidden;
}
.slideLeft{
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider">
Hi, I have some content!
</div>
</div>
<button class="slideLeft">Slide me left!</button>
Good luck!
You can wrap your div in another div with overflow:hidden and than you move to right or left the div inside.
I have a div that after I click an element(button1), expands its height. I then have another button appear which allows you to shrink the div(button2). After I click button1, the div expands and button2 shows at the bottom. I can then click button2 to shrink the div back to normal, but if I expand the div again, button2 is now off the edge of the screen, albeit in the same bottom location, just far left rather than centered.
I had to set the margin on button2 to -25px since the absolute positioning was kicking it off-center. And I need to use absolute positioning since it seemed it was only way to get the button to appear at the bottom of div after it had expanded.
$(".button1").on("click", function(){
$(".button1" ).fadeOut(200);
$("#block3").animate({
height: '800px'
}, 600, function() {
$(".button2").fadeIn(200);
});
});
$(".button2").on("click", function(){
$(".button2").fadeOut(200);
$("#block3").animate({
height: '400px'
}, 600,function(){
$(".button1" ).fadeIn(200);
});
});
.button2{
width: 50px;
height: 50px;
display:none;
position: absolute;
margin-left: 25px;
}
.button1{
width: 50px;
height: 50px;
margin-top: 25px;
image-rendering: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class = "col-md-12" id = "block3">
<img src="https://placehold.it/120x80/00aaaa/fff/?text=scroll.png" class = "button1" />
<img src="https://placehold.it/120x80/00aaaa/fff/?text=scroll1.png" class = "button2" />
</div>
</div>
Uploaded the code.
https://jsfiddle.net/bs9xhe5e/2/
On the second click it changed the inline styling to display:block instead of display:inline, if you just add the display:inline into your jQuery it works;
https://jsfiddle.net/havL1z3m/
Added
$(".button2").css({display:"inline"});
The reason .button2 is showing up all the way to the left is that the absolute positioning gives it a default left of 0px.
Probably the easiest fix would be to remove absolute position, as well as the margin-left. Instead, to get .button2 to the bottom of the section, just set margin-top: 725px.
.button2{
width: 50px;
height: 50px;
display:none;
margin-top: 725px;
}
And then you will no longer need to use .css() to change bottom of .button2.
Check out this working fiddle: https://jsfiddle.net/gkpx7L15/
Change button2 styles like this:
.button2{
width: 50px;
height: 50px;
display:none;
position: absolute;
margin-left: -25px;
left:50%;//added style
}
https://jsfiddle.net/bs9xhe5e/3/
And everything will work fine
NOTE: Element will be positioned to the center of parent like this only when width is fixed like here. Example:
.someItem{
width: someWidth;//here we set some width to element
left: 50%; //Here we set position from the left
margin-left: -(somewidth/2);//here we set -half of the element's width for margin-left
}
I'm pretty new to javascript and I'm trying to create a horizontal scrolling div :-
JSfiddle
As you can see the menu links go to each colour but I would like to put this inside a container which is 250x250px so only 1 colour is visible, then you click on whichever link and it scrolls to that colour.
Hope someone can help me with a few pointers.
Thanks!
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollLeft: $(this.hash).offset().left
}, 200);
});
});
.container {
white-space: nowrap;
}
.child-element {
min-width: 250px;
display: inline-block;
height: 250px;
}
.child1 {
background-color: purple;
}
.child2 {
background-color: orange;
}
.child3 {
background-color: black;
}
.child4 {
background-color: green;
}
.child5 {
background-color: blue;
}
.child6 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
PURPLE
ORANGE
BLACK
GREEN
BLUE
RED
<div class="container">
<div id="purple" class="child-element child1"></div>
<div id="orange" class="child-element child2"></div>
<div id="black" class="child-element child3"></div>
<div id="green" class="child-element child4"></div>
<div id="blue" class="child-element child5"></div>
<div id="red" class="child-element child6"></div>
</div>
As #Script47 mentioned, you'll want to apply overflow-x as a CSS property to your element, in addition the width (to act as a viewport). Here's what your final CSS might look like:
.container {
white-space: nowrap;
overflow-x: scroll;
width: 250px;
position: relative;
}
After that, you'll need to modify your JS slightly. You'll still want to scroll to the offset of the element, but you'll also need to take into account your current scroll position.
(To clarify, if you clicked orange - which has an offset initially of 250px, post-animation, the offset for orange would be0px, and black would be250px. If you then click black, it will attempt to scroll to 250px, which is the orange element.)
Here's what the updated JS might look like:
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
var current = $('.container').scrollLeft();
var left = $(this.hash).position().left;
event.preventDefault();
$('.container').animate({
scrollLeft: current + left
}, 200);
});
});
A fiddle to demonstrate: https://jsfiddle.net/bpxkdb86/4/
For the fiddle, I removed physical white-space in the HTML (to prevent the divs from having space between them) using <!-- comments -->, and also added position: relative to the containing element (to use position)
A CSS solution, try adding this to you element in CSS,
overflow-x: scroll;
This, should do it for you.
You need two changes for this to work.
First, add height and width for the container and then set overflow in css.
width:250px;
height:250px;
overflow: auto;
Second update jquery to animate the container, now it is animating the body.
$('.single-box').animate({
JSFiddle is avaialble in the following link
https://jsfiddle.net/jym7q0Lu/
just use a css if you want your div to be scrollable..
.container {
white-space: nowrap;
overflow-x: scroll;
width: 250px;
position: relative;
}
I am trying to get an information tag to slide out from behind a circular picture. In order to do this I used a block and circle to create the information field and stuck it behind the image.
The problem I am running into is getting it to slide out smoothly. Since there are two div's, the square slides out and then the circle, causing it to look choppy.
I would like to get it to toggle in and out as if it were one object.
$(document).ready(function(){
$('.employeeBlock').hide();
$('.employeeDot').hide();
$('.employee').click(function(){
$('.employeeDot').toggle('slide');
$('.employeeBlock').toggle('slide');
});
I have tried it with the employeeDot inside the employeeBlock which is in the employee div
as well as both the employeeDot and the employeeBlock seperate and in the employee div.
Both methods give similar results
Thanks
EDIT: Thanks for the replies, it's running smoother, but not quite perfect. I think I need to create one item that is shaped like a bullet, and toggle that in and out. Any ideas on how to do that?
The closest I can get is a pill shape, which leaves some of the area uncovered
EDIT: Here is my html:
<body>
<div class = 'employee'>
<div class = 'employeeDot'></div>
<div class = 'employeeBlock'></div>
<img class = 'pic' src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQfMDb1Qtu7gTDZTfnFR2XcPqrfkn27zeWASTBfczi-GGQAIKG_"/>
</div>
</body>
</html>
And my CSS:
.pic {
height: 150px;
width: 150px;
border-radius: 75px;
position: absolute;
}
>.employeeBlock {
background-color:maroon;
height: 150px;
width: 150px;
position: absolute;
left: 75px;
float: left;
}
>.employeeDot {
background-color: maroon;
height: 150px;
width: 250px;
border-radius: 150px;
position: absolute;
float: left;
left: 75px;
}
You can specify any number of selectors to combine into a single result:
$('.employeeDot, .employeeBlock').toggle('slide');
Multiple Selector
.toggle(); is deprecated, use .slideToggle(); instead.
Slide down:
$(document).ready(function(){
$('.employeeDot','.employeeBlock').hide();
$('.employee').on("click", function(){
$('.employeeDot, .employeeBlock').slideToggle('fast');
});
});
Slide from side:
$(document).ready(function(){
$('.employeeDot','.employeeBlock').hide();
$('.employee').on("click", function(){
$('.employeeDot, .employeeBlock').animate({width: 'toggle'});
});
});
The rest of the answers have covered everything, but to get the element to shape like a bullet use:
border-radius: 10px 10px 0 0;
But match the size and sides to your likings.
try this.
$(document).ready(function(){
$('.employeeBlock,.employeeDot').hide();
$('.employee').click(function(){
$('.employeeDot, .employeeBlock').toggle('slide');});
I have a PNG image of a character, and I want something like that:
http://www.swfcabin.com/open/1364482220.
If someone clicks on a part of the character's body, it'll be "selected".
The question is - how can I do that. I don't want to use more images (because I have multiple characters), I want to use CSS only.
I tried this: http://jsfiddle.net/eRVpL/, but the green background appear above the white background, and I want it to be only above the character.
The code:
<div class="character">
<img src="http://img194.imageshack.us/img194/3854/goldgladiator.png" />
<span></span>
</div>
<style>
.character { width: 210px;display: inline-block; vertical-align: middle; position: relative; }
.character > span {
display: block;
width: 200px;
height: 30%;
background: rgb(160, 255, 97);
opacity: .3;
position: absolute;
top: 0;
}
img {
max-width: 200px;
}
</style>
You can make this work with CSS masks, although they are currently only supported in WebKit browsers: http://caniuse.com/#feat=css-masks
http://jsfiddle.net/eRVpL/3/
HTML:
<div class="character">
<img src="http://img194.imageshack.us/img194/3854/goldgladiator.png">
<div class="green-mask"></div>
</div>
CSS:
.green-mask {
height: 200px;
width: 508px;
background: rgb(160, 255, 97);
opacity: .3;
position: absolute;
top: 0;
-webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png);
}
If you want to offset the elements like in the GIF you linked, put the colored background on children of the masked div:
http://jsfiddle.net/eRVpL/11/
HTML:
<div class="character">
<img src="http://img194.imageshack.us/img194/3854/goldgladiator.png">
<div class="green-mask">
<div class="filler"></div>
</div>
</div>
CSS:
.filler {
background-color: rgba(160, 255, 97, 0.3);
height: 200px;
margin-top: 200px;
width: 100%;
}
.green-mask {
position: absolute;
width: 508px;
top: 0;
-webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png);
}
And this one's just for fun: http://jsfiddle.net/eRVpL/23/ Try clicking the character. It uses checkboxes and labels with no JavaScript.
Currently there is no CSS-only means of accomplishing this. There is a specification for compositing and blending with CSS that's in the works, but it currently isn't being supported enough to be used in a product just yet. You can read-up on the spec here: http://www.w3.org/TR/compositing/
With this specification, we could set the blend-mode of your element to "screen", "overlay", or "lighten" which would make your character be green but the background would remain white. Unfortunately, this isn't possible just yet.
The best way would be, as jcubic said in one of your comments, "You need to use a mask, image that will be exactly the same but the character transparent".
Good luck!
Try using z-index for getting what you want. You'll be able to make the object appear to be hidden on a certain page until you bring it up with a mouse click or hover. You can also make a green image that's basically a silhouette and cut it up into three different portions, give them a little bit of exact positioning (each with their own division) and have a little z-index, then you've got yourself that. You might also want to cut up the actual character into three parts to make it easier.