I have submenu elements that has on click, slide out then spread out to fill a space. On the second click I'd like the animation to reverse before sliding in, but my jquery knowledge isn't good enough to achieve this. Can anyone help please?
my js:
$('.box').click(function(){
var flag = $(this).data('flag');
$('.tab1').toggle("slide", { direction: "left"}, 500);
$('.tab2').toggle("slide", { direction: "left" }, 500);
$('.tab3').toggle("slide", { direction: "left" }, 500);
$('.tab1').animate({top: (flag ? '+=50px' : '-=50px')});
$('.tab3').animate({top: (flag ? '-=50px' : '+=50px')});
$(this).data('flag', !flag)
});
JSFiddle
The animations for an element run after the previous one has finished, so at the moment the left slides will always run and when that has finished, the vertical animation kicks in.
When flag is true, you want the vertical animation to run first. So you need to do the vertical animation first.
The other issue then is that you are not animating .tab2 in the vertical animation, so it starts shrinking too early and looks odd. You can get around this by animating it by 0px during the vertical animation, so it will wait until the correct time to shrink:
$('.box').click(function(){
var flag = $(this).data('flag');
if(flag) {
$('.tab1').animate({top: '+=50px'});
$('.tab3').animate({top: '-=50px'});
$('.tab2').animate({top: '+=0px'});
}
$('.tab1, .tab2, .tab3').toggle("slide", { direction: "left"}, 500);
if(!flag) {
$('.tab1').animate({top: '-=50px'});
$('.tab3').animate({top: '+=50px'});
}
$(this).data('flag', !flag)
});
.square{
margin-left:100px;
}
.box{
position:relative;
width:150px;
height:150px;
background-color:transparent;
color:#fff;
text-align:center;
}
.tab4{
position:absolute;
right:10px;
top:50px;
width:70px;
height:40px;
background-color:grey;
}
.tab{
width:70px;
height:40px;
background-color:grey;
display:none;
}
.tab1{
position:absolute;
right:-70px;
top:50px;
}
.tab2{
position:absolute;
right:-70px;
top:50px;
}
.tab3{
position:absolute;
right:-70px;
top:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="square">
<div class="box">
<div class="tab4">CLICK</div>
<div class="tab1 tab"></div>
<div class="tab2 tab"></div>
<div class="tab3 tab"></div>
</div>
</div>
This is just an ordering problem. Try this out:
function slide(){
$('.tab1').toggle("slide", { direction: "left"}, 500);
$('.tab2').toggle("slide", { direction: "left" }, 500);
$('.tab3').toggle("slide", { direction: "left" }, 500);
}
function expand(flag){
$('.tab1').animate({top: (flag ? '+=50px' : '-=50px')}, 500);
$('.tab3').animate({top: (flag ? '-=50px' : '+=50px')}, 500);
}
$('.box').click(function(){
var flag = ($(this).data('flag')!=undefined)?$(this).data('flag'):true;
if(flag){
slide();
expand(flag);
}
else{
expand(flag);
setTimeout(slide, 500);
}
$(this).data('flag', !flag)
});
I have updated your Jsfiddle:
http://jsfiddle.net/VDesign/k52c9h12/5/
JS Code
$('.box').click(function(){
if($(this).hasClass('open'))
{
$('.tab1').animate({top: '-=50px'});
// add callback function to wait untill tab1 and 3 are back to 0
$('.tab3').animate({top: '+=50px'}, function() {
$('.tab1').toggle("slide", { direction: "left"}, 500);
$('.tab2').toggle("slide", { direction: "left" }, 500);
$('.tab3').toggle("slide", { direction: "left" }, 500);
});
$(this).removeClass('open');
} else {
$('.tab1').toggle("slide", { direction: "left"}, 500);
$('.tab2').toggle("slide", { direction: "left" }, 500);
$('.tab3').toggle("slide", { direction: "left" }, 500);
$('.tab1').animate({top: '+=50px'});
$('.tab3').animate({top: '-=50px'});
$(this).addClass('open');
}
});
Related
I am trying to move a div to a certain position. The following piece of code works fine:
$('#image1').click(function() {
$('#div1').animate({
'marginTop' : "+=160px"
});
});
However, I would like to animate the div to its original position once the image1 is clicked again. Does anybody have an easy to use idea for this? Thanks
Another way:
function firstClick() {
$('#div1').animate({
'marginTop' : "380px"
});
$(this).one("click", secondClick);
}
function secondClick() {
$('#div1').animate({
'marginTop' : "0px"
});
$(this).one("click", firstClick);
}
$("#image1").one("click", firstClick);
#div1 {
width: 200px;
height: 200px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image1">image1</div>
<div id="div1"></div>
You can use a class with css transition for this. Example code -
HTML
<div class="main">
Hello
</div>
CSS
.main {
background: green;
width: 100px;
height:100px;
margin-top:0px;
transition: margin-top 1s;
}
.set_margin {
margin-top:100px;
}
jQuery
$('.main').on('click', function() {
$(this).toggleClass('set_margin'); // toggle class on click event
})
You can implement it like -
$('#image1').click(function() {
$('#div1').toggleClass('set_margin');
});
Fiddle
You can add class to #img! its clicked first time, and remove on the second time, using is as an indicator of dive being clicked.
Example:
$('#image1').click(function() {
if($('#image1').hasClass("clicked")){
$('#div1').animate({
'marginTop' : "-=160px"
});
$('#image1').removeClass("clicked");
}
else{
$('#image1').addClass("clicked");
$('#div1').animate({
'marginTop' : "-=160px"
});
}
});
One more way
var toggle = true;
$('#image1').click(function() {
if (toggle) {
$('#div1').animate({
'marginTop': "+=160px"
});
toggle = false;
} else {
$('#div1').animate({
'marginTop': "-=160px"
});
toggle = true;
}
});
#div1 {
height: 50px;
width: 50px;
background: black;
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="image1">Toggle</button>
<div id="div1"></div>
Here and example with codepen live editor
var move = true
$('#image1').click(function() {
if (move) {
$('#div1').animate({
'margin-left': "+=160px"
}, move = false);
} else {
$('#div1').animate({
'margin-left': "0px"
}, move = true);
}
});
#image1 {
width:100px;
height:100px;
background:red;
cursor:pointer
}
#div1 {
width:100px;
height:100px;
background:green;
margin-left:0px;
}
<div id="image1">ClickMe</div>
<div id="div1"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
By using toggleClass we can achieve this animation.
<style type="text/css">
.animation{
margin-top:160px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#image1').click(function(){
$('#div1').toggleClass("animation");
})
})
</script>
Here is JsFiddle link animate
I'm trying to create a situation where on click, menu items slide out then spread out vertically. I've kind of achieved this but when the menu is closed and reopened, the menu items pickup where they left off and spread out even further!
How do I toggle or reset the vertical movement?
My jQuery:
$('.box').click(function(){
$('.tab1').toggle("slide", { direction: "left"}, 500);
$('.tab2').toggle("slide", { direction: "left" }, 500);
$('.tab3').toggle("slide", { direction: "left" }, 500);
});
$('.box').click(function(){
$('.tab1').animate({top:'+=50px'});
$('.tab3').animate({top:'-=50px'});
});
html:
<div class="square">
<div class="box">
CLICK
<div class="tab1 tab"></div>
<div class="tab2 tab"></div>
<div class="tab3 tab"></div>
</div>
</div>
css:
.square{
margin-left:100px;
}
.box{
position:relative;
width:150px;
height:150px;
background-color:#000;
color:#fff;
text-align:center;
}
.tab{
width:70px;
height:40px;
background-color:grey;
display:none;
}
.tab1{
position:absolute;
right:-70px;
top:50px;
}
.tab2{
position:absolute;
right:-70px;
top:50px;
}
.tab3{
position:absolute;
right:-70px;
top:50px;
}
JSFiddle
Create toggle functionality for the other animations as well
$('.box').click(function(){
var flag = $(this).data('flag');
$('.tab1').toggle("slide", { direction: "left"}, 500);
$('.tab2').toggle("slide", { direction: "left" }, 500);
$('.tab3').toggle("slide", { direction: "left" }, 500);
$('.tab1').animate({top: (flag ? '+=50px' : '-=50px')});
$('.tab3').animate({top: (flag ? '-=50px' : '+=50px')});
$(this).data('flag', !flag)
});
FIDDLE
Need some help on this please, I need to have the div close when a tab is open alternately, or one tab can be open and others will close automatically
Here is My fiddle I just got from someone
HTML:
<div class="siteMap">
<div class="mapButton"></div>
<div class="theMap" style="background:red;">content here</div>
</div>
<div class="siteMap" style="margin-top:70px;">
<div class="mapButton"></div>
<div class="theMap" style="background:blue;">content here</div>
</div>
JAVASCRIPT:
$('.mapButton').click(function() {
var mapPos = parseInt($(this).parent('.siteMap').css('left'), 10);
if (mapPos < 0) {
$(this).parent('.siteMap').animate({
left: '+=200'
}, 458, 'swing', function() {
// Animation complete.
});
}
else {
$(this).parent('.siteMap').animate({
left: '-=200'
}, 458, 'swing', function() {
// Animation complete.
});
}
});
CSS:
.siteMap {
width:200px;
position:fixed;
left:-200px;
top:0px;
display:block;
color:#FFF;
z-index:2;
opacity: 0.95;
}
.siteMap .mapButton {
display:block;
color:#333;
background-color:#ACACAC;
height:50px;
width:50px;
text-align:center;
position:absolute;
left: 200px;
cursor:pointer;
}
.siteMap .theMap {
width:100%;
height:100px;
background-color:#666;
position:relative;
}
Here is the fiddle
Try
$('.mapButton').click(function () {
var $siteMap = $(this).parent('.siteMap');
var mapPos = parseInt($siteMap.css('left'), 10);
if (mapPos < 0) {
$siteMap.animate({
left: '+=200'
}, 458, 'swing', function () {
// Animation complete.
});
} else {
$siteMap.animate({
left: '-=200'
}, 458, 'swing', function () {
// Animation complete.
});
}
$('.siteMap').not($siteMap).filter(function () {
return parseInt($(this).css('left'), 10) == 0
}).animate({
left: '-=200'
}, 458, 'swing', function () {
// Animation complete.
});
});
Demo: Fiddle
I have put together this jsfiddle.
http://jsfiddle.net/YJPV9/
<div id="wrapper">
<div class="portfolio"></div>
<div class="portfolio"></div>
<div class="portfolio"></div>
<div class="portfolio"></div>
</div>
.portfolio {
height:50px;
width:200px;
float:left;
margin:20px 20px 0 0;
background-color:red;
}
#wrapper {
width:500px;
}
.portfolio:hover {
}
$('.portfolio', '#wrapper').hover(function() {
$('.portfolio', '#wrapper').not(this).stop().animate({
opacity: .2
}, 500);
$(this).stop().animate({
opacity: 1
}, 500);
});
$('.portfolio', '#wrapper').mouseleave(function() {
('.portfolio', '#wrapper').animate({opacity:1}, 500);
});
I'm looking to return all of the elements back to opacity: 1 when the mouse leaves the wrapper.
Try this:
$('.portfolio', '#wrapper').hover(function () {
$('.portfolio', '#wrapper').not(this).stop().animate({
opacity: .2
}, 500);
}, function (){
$('.portfolio', '#wrapper').stop().animate({
opacity: 1
}, 500);
});
jsFiddle example
There was a $ missing in your Fiddle. Adding that allowed it to work as intended.
I'm working on a project to create a website in which I need 3 divs to appear/disapear when ticking some checkboxes (one per div). I made an exemple here : http://jsbin.com/okevuy/1/edit
My problem (quite complicated to explain) is that I want the first ticked DIV appears at the top (no matter which one is triggered first) and the next ticked DIV below the first. If the first is hidden by unticking the checkbox, the second one moves to the top, and the next ticked appears below, etc...
Can some one help in doing that and show me how to ?
Thanks a lot !
How this http://jsbin.com/okevuy/5/
example code
$('#red_div').animate({
'height': '50',
'opacity': '1',
'margin-left': '0px'
}, 300);
else $('#red_div').animate({
'height': '0',
'opacity': '0',
'margin-left': '-80px'
}, 300);
});
try this
markup: Add a wrapper around the boxes
<div id="mianwrapper" >
<div id='red_div' class='divs'></div>
<div id='blue_div' class='divs'></div>
<div id='green_div' class='divs'></div>
</div>
script:
$(document).ready(function () {
$('#checkbox_red_div').click(function () {
if ($(this).is(':checked')){ checkPosition("red_div"); $('#red_div').show(10); $('#red_div').animate({
'opacity': '1',
'margin-left': '0px'
}, 300)}
else $('#red_div').animate({
'opacity': '0',
'margin-left': '-80px',
"display":"none"
}, 300 , function(){$('#red_div').fadeOut(100)});
});
$('#checkbox_blue_div').click(function () {
if ($(this).is(':checked')) { checkPosition("blue_div"); $('#blue_div').show(10); $('#blue_div').animate({
'opacity': '1',
'margin-left': '0px'
}, 300 )}
else $('#blue_div').animate({
'opacity': '0',
'margin-left': '-80px',
}, 300 , function(){$('#blue_div').fadeOut(100)} );
});
$('#checkbox_green_div').click(function () {
checkPosition("green_div");
if ($(this).is(':checked')){ $('#green_div').show(10); $('#green_div').animate({
'opacity': '1',
'margin-left': '0px'
}, 300)}
else $('#green_div').animate({
'opacity': '0',
'margin-left': '-80px',
}, 300 , function(){$('#green_div').fadeOut(100)});
});
function checkPosition(getBox)
{
$("#"+getBox).appendTo("#mianwrapper");
}
});
Css:
Small change in css
#red_div{
border:solid 1px red;
width:100px;
height:50px;
opacity:1;
float:left;
clear:left;
}
#blue_div{
border:solid 1px blue;
width:100px;
height:50px;
opacity:1;
float:left;
clear:left;
}
#green_div{
border:solid 1px green;
width:100px;
height:50px;
opacity:1;
float:left;
clear:left;
}
I've edit your example: http://jsbin.com/okevuy/7/edit. Check it. What have been changed: "height: 50px" if div visible, height:0px otherwise.
Hope it will solve your issue.
It is still taking spaces since you are just moving them instead of hiding them. You can try hide/show the div when animate is complete:
if ($(this).is(':checked')) $('#red_div').show().animate({
'opacity': '1',
'margin-left': '0px'
}, 300);
else $('#red_div').animate({
'opacity': '0',
'margin-left': '-80px'
}, 300, function(){ $(this).hide();});
});
http://jsfiddle.net/WqbH4/