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!
Related
How can i resize a logo( es width: 100px ) in a header on mouse scrolling?
$('.logo').scroll(function() {
$(this).width(100);
$(this).off(); //removes the handler so that it only resizes once...
})
.header {
background-color: black;
}
.logo {
height:100px;
width: 100%;
background-image: url("http://unika.myarmah.it/skin/frontend/sns_simo/default/images/logo.png");
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="logo"></div>
</div>
Just use javascript:
Why? - Because its just as short as using jQuery.
Update #1 -
after seeing the comments to the previous answer from the author, I have adjusted my example to include animation and reset when at the top of the page. Again - just use javascript, and for better performance benefits use CSS classes so that all paints are done in one cycle.
Update #1 jsfiddle - https://jsfiddle.net/113dn29z/16/
var logo = document.querySelector('.logo');
var handleResize = function(e) {
if (document.body.scrollTop === 0) {
logo.classList.remove("resize");
} else {
logo.classList.add("resize");
}
};
document.addEventListener('scroll', handleResize);
<div class="header">
<div class="logo">
</div>
</div>
body {
height: 9999px;
overflow: auto;
}
.header {
background-color: black;
}
.logo {
margin-top: 200px;
height:100px;
width: 100%;
background-color: red;
background-repeat: no-repeat;
transition: width 0.2s ease;
}
.logo.resize {
width: 100px;
}
old jsFiddle example - https://jsfiddle.net/113dn29z/10/
var logoHasResized = false;
$(document).on('scroll', function (e) {
if (window.scrollY == 0) {
$('.logo').animate({'width': '100%'}, 250);
logoHasResized = false;
} else if (logoHasResized == false) {
$('.logo').animate({'width': 100}, 250);
logoHasResized = true;
}
});
edit: Since you want it to go back when you scroll to the top of the page, i've added in a check to see if the animation has happened, as you don't want it to fire constantly.
Please see this fiddle http://jsfiddle.net/rabelais/6bt70uhj/9/
$('#name-a').click(function() {
$('#bio-line-1').animate({width: 'toggle'});
window.setTimeout(function (){$('#bio-line-2').slideToggle( "slow" ); }, 300);
When clicking the link the first lines slides in from the left, and then when that is finished the second line slides in from the top. When it slides back to be hidden, the first line slides aways before the second line does.
How can I change it so the second line slides away before the first line slides away?
$('#name-a').click(function () {
if ($('#bio-line-1').css('display') == 'none') {
$('#bio-line-1').animate({ width: 'toggle' });
window.setTimeout(function () {
$('#bio-line-2').slideToggle("slow");
}, 300);
}
else {
$('#bio-line-2').slideToggle("slow");
window.setTimeout(function () {
$('#bio-line-1').animate({ width: 'toggle' });
}, 300);
}
});
DEMO
I think this is what you want:
$('#name-a').click(function () {
window.setTimeout(function () {
$('#bio-line-2').slideToggle("slow", function () {
$('#bio-line-1').animate({
width: 'toggle'
});
});
}, 300);
});
Demo: https://jsfiddle.net/tusharj/6bt70uhj/11/
I think you can do
var $l2 = $('#bio-line-2'),
$l1 = $('#bio-line-1');
var $a = $('#name-a').click(function() {
$a.toggleClass('visible');
var visible = $a.hasClass('visible'),
$f = visible ? $l1 : $l2,
$s = visible ? $l2 : $l1;
$f.animate({
width: 'toggle'
});
window.setTimeout(function() {
$s.slideToggle("slow");
}, 300);
});
#name-a {
left: 38px;
position: fixed;
top: 38px;
z-index: 1;
}
#bio-line-1 {
left: 150px;
position: fixed;
top: 35px;
width: 633px;
z-index: 1;
}
#bio-line-1 p {
color: #333333;
display: block;
float: right;
font-size: 16px;
line-height: 21px;
width: 552px;
}
#bio-line-2 {
left: 150px;
margin-top: 20px;
position: fixed;
top: 38px;
width: 633px;
z-index: 1;
}
#bio-line-2 p {
color: #333333;
display: block;
float: right;
font-size: 16px;
line-height: 21px;
width: 552px;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="name-a">
John Love
</div>
<div id="bio-line-1" class="hidden">
<p>holds a Master's Degree from the University of the Arts</p>
</div>
<div id="bio-line-2" class="hidden">
<p>London and currently works in London.</p>
</div>
$('#name-a').click(function() {
if($("#bio-line-2").is(":visible")){
window.setTimeout(function (){
$('#bio-line-1').animate({width: 'toggle'});
}, 300);
$('#bio-line-2').slideToggle( "slow" );
}
else{
window.setTimeout(function (){
$('#bio-line-2').slideToggle( "slow" );
}, 300);
$('#bio-line-1').animate({width: 'toggle'});
}
});
i have made some condition that while showing the lines, line number 1 will appear first and then line number 2 will appear. and while hiding lines, line number 2 will hide first and then line number 1 will hide... i think this is what you trying
Here is fiddle link
Thank You
I'd do something like this. I would also not use a setTimeout as it is not a reliable way to trigger consecutive animations. The timer can trigger at different times depending on what is happening in the UI thread and therefore ruining the effect you are trying to create. You should use the animate success callback of each animation in order to trigger the next one at the exact right time.
http://jsfiddle.net/6bt70uhj/23/
var $line1 = $('#bio-line-1'),
$line2 = $('#bio-line-2');
$('#name-a').click(function() {
if (!$line1.is(":visible")) {
$line1.animate({
width: 'toggle'
}, 300, function () {
$line2.slideToggle("slow");
});
} else {
$line2.slideToggle("slow", function() {
$line1.animate({
width: '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 :)
Trying to get a jQuery vertical accordion working with 3 separate panels, A, B and C, each currently 33.3% wide. What I am trying to accomplish is when you collapse A, B & C will fill up the other 33% of that new available space from A being collapsed. If you close A & B then C would fill up 100% of the empty space. Any help is much appreciated as I am sure I may be approaching this the complete wrong way?
http://jsfiddle.net/Mvr3P/
HTML
<div id="toggle"><div id="toggle-button"></div></div>
<div id="toggle2"><div id="toggle-button2"></div></div>
<div id="toggle3"><div id="toggle-button3"></div></div>
CSS
#toggle {
float: left;
height: 200px;
width:33.3%;
background:red;
}
#toggle2 {
float: left;
height: 200px;
width:33.3%;
background:blue;
}
#toggle3 {
float: left;
height: 200px;
width:33.3%;
background:green;
}
#toggle-button {
height: 20px;
width: 100%;
background:blue;
}
#toggle-button2 {
height:20px;
width: 100%;
background: purple;
}
#toggle-button3 {
height:20px;
width: 100%;
background:orange;
}
JQUERY
$(document).ready( function(){
$('#toggle-button').click( function() {
var toggleWidth = $("#toggle").width();
if (toggleWidth = "33.3%") {
toggleWidth ="100%";
}
else if (toggleWidth = "100%") {
toggleWidth = "10px";
}
else {
toggleWidth = "33.3%"
}
$('#toggle').animate({ width: toggleWidth });
});
$('#toggle-button2').click( function() {
var toggleWidth = $("#toggle2").width();
if (toggleWidth = "33.3%") {
toggleWidth ="100%";
}
else if (toggleWidth = "100%") {
toggleWidth = "10px";
}
else {
toggleWidth = "33.3%"
}
$('#toggle2').animate({ width: toggleWidth });
});
$('#toggle-button3').click( function() {
var toggleWidth = $("#toggle3").width();
if (toggleWidth = "33.3%") {
toggleWidth ="100%";
}
else if (toggleWidth = "100%") {
toggleWidth = "10px";
}
else {
toggleWidth = "33.3%"
}
$('#toggle3').animate({ width: toggleWidth });
});
});
So there's a few tricky things going on here - the biggest challenge being how to animate more than one thing at a time.
JSFiddle of the solution here: http://jsfiddle.net/vYzpB/1/
Firstly, using classes to generically label your elements will allow you to write less code. This is a hugely important thing especially when you're applying the same behavior to more than one element. As you seem to know, you should only have one ID, but you can have many elements with the same class name.
<div class="accordion">
<div id="toggle" class="toggle-item"><div id="toggle-button" class="toggle-button"></div></div>
<div id="toggle2" class="toggle-item"><div id="toggle-button2" class="toggle-button"></div></div>
<div id="toggle3" class="toggle-item expanded"><div id="toggle-button3" class="toggle-button"></div></div>
</div>
Additionally, wrap all of the elements in a parent div (which I called accordion). I'll explain why shortly.
With that change, we can apply a click event to the .toggle-button class that handles the event for each of the accordion items:
$(document).ready( function(){
$('.toggle-button').click( function() {
// capture the parent div with the class of 'toggle-item'
var $parentToggle = $(this).parent('.toggle-item');
// run this within setTimeout so that both animations
// run at the same time. This is called "running asynchronously"
window.setTimeout(function() {
$('.toggle-item').not($parentToggle).animate({
width: '10%'
});
}, 0);
$parentToggle.animate({
width: '80%'
});
});
});
The window.setTimeout is the secret sauce here. Without it, jQuery will wait until the first animation is finished, THEN move on to the next. By wrapping the first animation inside a setTimeout we essentially remove it from the top-to-bottom execution process and call it asynchronously. We set this to timeout at "0" because we actually want it to run right away (as opposed to waiting a certain amount of milliseconds).
The CSS
The CSS has a "default state" .expanded class we add to the element intended to take up the 2/3 (or whatever % you want) space.
Notice also how that new parent div has a set width. Without it, the elements will flop around while transitioning.
.accordion {
width: 600px;
overflow: hidden;
}
.toggle-item {
float: left;
height: 200px;
width: 10%;
}
.expanded {
width: 80%;
}
#toggle {
background:red;
}
#toggle2 {
background:blue;
}
#toggle3 {
background:green;
}
.toggle-button {
height: 20px;
width: 100%;
}
#toggle-button {
background:blue;
}
#toggle-button2 {
background: purple;
}
#toggle-button3 {
background:orange;
}
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');
}
});
}
});