Animate div on click to bottom and back to original position - javascript

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

Related

Second toggel should be close when i click back to the first toggle

I have tow toggles. I want appear only one toggle at the time. When i click to second toggle then first toggle should be close.
Javascript
$('#bar').click(function () {
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$('#foo1').slideToggle('slow');
});
HTML
<button id="bar">bar</button>
<div id="foo"></div>
<button id="bar1">bar1</button>
<div id="foo1"></div>
CSS
#foo {
width: 100px;
height: 100px;
background-color: green;
display:none;
}
#foo1 {
width: 100px;
height: 100px;
background-color: green;
display:none;
}
jsfiddle
You can use classes instead of id's
$('.bar').click(function () {
$('.foo').hide(); // hide previous elements
$(this).next().show('slow'); // show next element in the DOM (it will be <div> with class 'foo')
});
Example
I did what you want with classes,
the accordion style,
$('#bar, #bar1').click(function () {
var id = '#'+$(this).attr('data-for');
if ($(id).hasClass('open')) {
$(id).toggleClass('open');
}
else if ($('#foo').hasClass('open') || $('#foo1').hasClass('open')) {
$('#foo').toggleClass('open');
$('#foo1').toggleClass('open');
}
else {
$(id).toggleClass('open');
}
});
#foo {
width: 100px;
height: 0;
background-color: green;
display:block;
transition: all .5s;
}
#foo1 {
width: 100px;
height: 0;
background-color: green;
display:block;
transition: all .5s;
}
#foo.open, #foo1.open {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bar" data-for="foo">bar</button>
<div id="foo"></div>
<button id="bar1" data-for="foo1">bar1</button>
<div id="foo1"></div>
hi i have two ways which you can achive it
in this case the first div is sliding up when second div is opening
$('#bar').click(function () {
$("div").slideUp("slow");
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$("div").slideUp("slow");
$('#foo1').slideToggle('slow');
});
case 1 in fiddler
in second case am hiding the first div when am opening the second div
$('#bar').click(function () {
$("div").hide();
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$("div").hide();
$('#foo1').slideToggle('slow');
});
case 2 in fiddler
i hope my answer helps you :)

Slide div in from right

I have the following code in my Shopify Theme.
<script language="JavaScript">
function setVisibility(id) {
if(document.getElementById('opensign').value=='Hide Layer'){
document.getElementById('opensign').value = 'Show Layer';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('opensign').value = 'Hide Layer';
document.getElementById(id).style.display = 'inline';
}
}
</script>
Can I add so the boxes are slided in from right? Code for boxes is below:
<a href="#" id="opensign" onclick="setVisibility('sign');";>Sign In</a>
<div id="sign">
Blaslasd.
</div>
You can use a css class for hiding, which should be added from the beginning:
.hide {
left: 100%;
opacity: 0;
}
and a class for transitions:
.animated {
transition: left 1s;
-webkit-transition: left 1s;
}
Then in your javascript, add and remove the hide class.
You can see a demo on codepen here.
If you use shopify theme there will be jquery available.So if it is possible this will work for you :
http://jsfiddle.net/csdtesting/sy2upvjb/
JS
$('#sign').click(function () {
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide', {
direction: 'right'
}, 1000);
} else {
$('#userNav').hide('slide', {
direction: 'right'
}, 1000);
}
});
css
a {
color: #000;
cursor:pointer;
display:block;
}
#userNav {
width: 200px;
height: 200px;
display: none;
background: #ff0000;
}
<a id="sign">right-to-left</a>
<div id="userNav">Blaslasd</div>

Clone and insertAfter only once

I want to clone the first-child button from #navCotainer and insert it after the last button.
Now the Problem is: The script kind of inserts the first child 3 times. what do I have to do to get ir right? And also, what am I doing wrong?
of course a link to the fiddle http://jsfiddle.net/ygjDR/ and the code:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<span class="moveNav8 left8">left</span>
<div id="navContainer" style="width: 100%; overflow-y: auto;">
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button">4</div>
</div>
<script type="text/javascript">
$(document).on('click','.moveNav8', function() {
if($(this).hasClass('left8')) {
$('.button').animate({
left: '-=305'
}, 1000, function() {
$('#navContainer div.button:first-child').addClass("xxxx");
$('#navContainer ').children('div.button:first-child').clone().css("background-color","orange").insertAfter("#navContainer div.button:last-child");
});
}
});
</script>
<style type="text/css">
.button {
position: relative; float: left;
width:100px;
height:50px;
background-color:green;
margin-right:10px;
}
.moveNav8 {
position:absolute;
top:100px;
left:0px;
background-color:red;
width:40px;
height:40px;
}
.moveNav8.right8 {
left:100px;
}
</style>
Try this:
http://jsfiddle.net/gtttG/
You need to add a check for $(".button:animated").length === 0.
Animation callback is invoked for every item, appending a button 4 times. Instead execute callback only once after the last animation using deferred pattern:
$(document).on('click', '.moveNav8', function () {
if ($(this).hasClass('left8')) {
$('.button').animate({
left: '-=305'
}, 1000).promise().done(function () {
$('#navContainer div.button:first-child').addClass("xxxx");
$('#navContainer').children('div.button:first-child').clone().css("background-color", "orange").insertAfter("#navContainer div.button:last-child");
})
}
});
http://jsfiddle.net/ygjDR/3/

Animating multiple divs by switching their classes

i am having a hard time trying to animate this box, so the changes go smooth, but i just cannot figure out how to keep everything together. Help would be really appreciated. (already tried with 'switchClass') Here is the whole code:
<script src="jquery.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<style>
#box {
position: relative;
margin: auto;
padding: auto;
display: block;
width: 167px;
height: 167px;
}
#box .item {
position: relative;
margin: 0;
display: block;
width: 100%;
height: 33%;
cursor: pointer;
}
#box .over {
height: 84%;
}
#box .other {
height: 8%;
}
#top {
background: red;
}
#mid {
background: green;
}
#bot {
background: blue;
}
</style>
<script>
function anim(item) {
$('.item').attr('class', 'item other');
$('#' + item.id).attr('class', 'item over');
}
function clean() {
$('.item').attr('class', 'item');
}
</script>
<div id='box' onmouseout="clean()">
<div id='top' class='item' onmouseover='anim(this)'></div>
<div id='mid' class='item' onmouseover='anim(this)'></div>
<div id='bot' class='item' onmouseover='anim(this)'></div>
</div>
edit: this code is running just fine, but its just an example of final output (just some animations needed)
Maybe this is not super cool, but seems to do job:
var $items = $('.item').on({
mouseover: function () {
$items.removeClass('over other');
$items.stop().filter(this).animate({height: '84%'}, function () {
$(this).addClass('over');
})
.end().not(this).animate({height: '8%'}, function () {
$(this).addClass('other');
});
},
reset: function() {
$items.removeClass('over other').stop().animate({height: '33%'});
}
});
$('#box').mouseout(function() {
$items.trigger('reset');
});
http://jsfiddle.net/dfsq/4vnkh/1/
If you want to animate the change, please take a look at jQuery animate
Something like this:
$('.item').mouseenter(function() {
$('.item').animate({
height: 80%
}, 500, function() {
// Animation complete.
});
});
$('.item').mouseleave(function() {
$('.item').animate({
height: 33%
}, 500, function() {
// Animation complete.
});
});
in this case you don't need onmouseout or onmouseover
If your animation is based solely on CSS class attributes why not use CSS3 hover pseudo-selector?
Example:
.box {
width: 200px;
}
.box:hover {
width: 400px;
}
<div class="box">Hover over me!</div>
Additional: Response to comments
If you are looking for custom animation duration you can use a callback function with a duration for the initial function call. Here's an example:
$('#div').animate({
width: '200px',
color: 'blue'
}, 5000, function() {
// Animation finished after 5 seconds.
alert("Animation complete!");
});
Addition #2
Your problem child is this little guy:
$('.item').attr('class', 'item other');
This sets each box to 8% height and THEN expands the primary animating box. Remove this and your #box will remain the same height throughout all animations!

How to Animate (slide) content adjacent to content with jquery toggle()

I am setting up a page which the user can hide the side bar if they wish. I am trying to use the jqeuryui to do this with the following js code
// TOGGLE JS
$(function () {
function runEffect() {
var options = {};
$("#effect").toggle('slide', options, 500);
};
$("#button").click(function () {
runEffect();
return false;
});
});
I have this working in a JSFiddle here http://jsfiddle.net/jwg4U/
However, when you look at the JSFiddle you will notice that my main content area which is a DIV called #content does not animate, it just jumps into place when I toggle the sidebar.
I would like the content div to also slide into place seamlessly and follow the toggle as it if it attached to it.
I have looked at jquery animate, but not sure how to implement this with the slide?
A Second part I am struggling with is how to change the button text when the sidebar is closed to say "Show Sidebar" - Weather it is open or closed right now it just says "Hide Sidebar"
Looking for some help
Thanks
See this updated fiddle : http://jsfiddle.net/jwg4U/23/
HTML:
<div id="container" style="width:800px">
<div id="header">
<h1>HEADER</h1>
</div>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<div id="menu" style="background-color:#FFD700;height:300px;width:100px;float:left;">
<h3>SIDEBAR</h3>
</div>
</div>
<div id="content" style="background-color:#EEEEEE;height:300px;">Main Content goes here</div>
</div>
Hide Sidebar
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
FOOTER</div>
</div>
​
JS:
// TOGGLE JS
$(function() {
var i = 0;
function runEffect() {
var options = {};
if (i === 0) {
i = 1;
$(".toggler").animate({
left: -100
}, {
duration: 500
});
}
else {
i = 0;
$(".toggler").animate({
left: 0
}, {
duration: 500
});
}
}
$("#button").click(function() {
if (i === 0) {
$(this).html("Show Sidebar");
}
else {
$(this).html("Hide Sidebar");
}
runEffect();
return false;
});
});
// TABS JS
$(function() {
$("#tabs").tabs();
});​
CSS:
.toggler {
float: left;
position: relative;
}
#button {
padding: .5em 1em;
text-decoration: none;
}
#effect {
position: relative;
float: left;
}
#content{
position: relative;
float: left;
width: 500px;
}
#button{
float: left;
clear: both;
}
#header{
background-color: #000;
color: #FFF;
}​
The jsfiddle for the complete answer : http://jsfiddle.net/jwg4U/22/
$('#effect').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 500,
specialEasing: {
width: 'linear',
height: 'linear'
},
complete: function() {
$("#content").animate(
{ left: '+=100px' },
60,
'easeInQuad',
function ()
{
if(isOpen)
{
isOpen=false;
$("#button").html('Show Sidebar');
}
else
{
isOpen=true;
$("#button").html('Hide Sidebar');
}
});
}
});

Categories

Resources