I have four div's or td's and what I am trying to do is if I click on any one, then all of them slide left, the remaining three should disappear, and the one I clicked should remain.
I also want a neat animation effect.
I have tried this but it gives some error for style:
//xControl is a link inside the td
$(xControl).parent().siblings().each(function fn() {
setTimeout(function fn() {
$(this).animate({ width: 'toggle' });
}, 800);
});
I have also tried:
$(this).hide("slide", { direction: "right" }, 500);
This doesn't work either.
What am I doing wrong?
$(xControl).on("click", function(){
var thisDiv = $(this);
var sibs = thisDiv.siblings();
sibs.animate({'left':'-=150'},{queue:false,complete:function(){
$(this).animate({'opacity':0});
}
});
thisDiv.animate({'left':'-=150'},{queue:false});
});
This is more or less how I would do it. You can do whatever animations you want in there besides a slide and fade. You can use the jquery-ui built in functions, but I like animate personally for the more customizable animations.
Here's my fiddle to show what it looks like http://jsfiddle.net/AXkxQ/1/
Give this a try, might start you out:
http://jsfiddle.net/M8scf/2/
.item
{
width:50px;
height:50px;
margin:0 5px 0 0;
display:inline-block;
position:relative;
background:lime;
cursor:pointer;
}
<div class="con">
<div class="item">DIV 1</div>
<div class="item">DIV 2</div>
<div class="item">DIV 3</div>
<div class="item">DIV 4</div>
</div>
$(".con .item").click(function() {
$(this).siblings().hide("slow");
});
You can try with:
$(xControl).parent().siblings().each(function fn() {
setTimeout(function fn() {
$(this).animate({ left: '-=500px' });
}, 800);
});
you have to make sure you have in your css the possition set as relative xControl{position: relative;}
Related
I am trying to make a div that expands in height when clicked on, and then goes back to its original size when clicked on again. I have tried to use .toggle but whenever I do every div (with the related class) completely vanishes. I posted a code pen below so you can easily view the codes effects.
http://codepen.io/JoshuaHurlburt/pen/JKqAPr
<div>
<div class='box' id='emailVer'>
<h2 id='payText'>PAYMENT</h2>
</div>
<div class='box' id='accCust'>
<h2 id='acText'>ACCOUNT CUSTOMIZATION</h2>
</div>
<div class='box' id='pay'>
<h2 id='evText'>EMAIL VERIFICATION</h2>
</div>
</div>
JS:
var main = function(){
$('.box').click(function() {
$(this).animate({
height: "300px"
},200 );
}
)}
$(document).ready(main);
I decided to leave out the CSS, but I will edit it in if anyone thinks it is important to the solution
There's probably a better solution than this but here is one-
Replace your script file with this
var main = function(){
$('.box').click(function() {
var el = $(this);
if (!el.hasClass('selected')) {
el.animate({
"height": "300px"
}, 200)
el.addClass("selected");
} else {
el.animate({
"height": "75px"
}, 200);
el.removeClass("selected");
}
}
)}
$(document).ready(main);
What you need is a way to track what has already been selected (and animated) and what has not. I chose to add a class (selected) and check to see if the element has that class. If it has not yet been selected, animate to 300px and add the class, else animate back to 75px and remove it.
Try .slideToggle
$( "#clickme" ).click(function() {
$( "#book" ).slideToggle( "slow", function() {
// Animation complete.
});
});
The toggle functions in jQuery toggle the visibility of an element which is why they disappear.
I believe what you are looking for is .toggleClass. See http://api.jquery.com/toggleclass/. You can then create another class with the expanded height properties. Which will be toggled on and off on click.
Adding height to your existing transition property on box will handle the animation.
CSS
.box {
width:300px;
height:75px;
margin:0 auto;
-webkit-transition:box-shadow 1s, height 1s;
transition: box-shadow 1s, height 1s;
}
.expanded {
height: 300px;
}
JS
var main = function(){
$('.box').click(function() {
$(this).toggleClass('expanded');
}
)};
$(document).ready(main);
This is my first question here, feel free to tell me if I am not specific enough or whatever I do wrong!
I want a jquery method which change all divs with the class "passive" to height 500 px and passive-->active, so there would be another method which changes the height back to 100px. The first half is working, I got the class changed, but the second animation won't happen. All I have in html is one div with the class of passive.
$("document").ready(function(){
$(function() {
$(".passive").click(function(){
$(this).animate({height:'500px'});
$(this).addClass("active");
$(this).removeClass("passive");
});
$(".active").click(function(){
$(this).animate({height:'100px'});
$(this).addClass("passive");
$(this).removeClass("active");
});
});
});`
jQuery.animate() is costly and choppy. You will get a smoother transition by just toggling the class and using CSS to transition
.passive {
height:100px;
transition:height 1s;
}
.active {
height:300px;
}
Array
.from(document.querySelectorAll('.passive'))
.forEach(
e => e.addEventListener(
'click',
evnt => e.classList.toggle('active')
)
)
.container { display:flex; }
.container>div {
flex:1 auto;
}
.passive {
background-color:red;
margin:5px;
height:100px;
width:20px;
transition:height 1s;
}
.active {
height:300px;
}
<div class="container">
<div class="passive" tabindex=1></div>
<div class="passive" tabindex=2></div>
<div class="passive" tabindex=3></div>
</div>
You are trying to interact with a class added after the DOM loaded. By default, click functions will only work with elements that exist on load. You can either use event delegation or add a base class to the element. If you add a base class, you can simplify the click function.
You can do an if/else to check if the element has a certain class using hasClass. Also, you can chain together the $(this) methods inside the if/else blocks.
$("document").ready(function() {
$(function() {
$("baseclassname").click(function() {
if ($(this).hasClass('passive')) {
$(this).animate({ height: '500px' });
$(this).addClass("active");
$(this).removeClass("passive");
// $(this).animate({ height: '500px' }).addClass('active').removeClass('passive');
} else {
$(this).animate({ height: '100px' });
$(this).addClass("passive");
$(this).removeClass("active");
// $(this).animate({ height: '100px' }).addClass('passive').removeClass('active');
}
});
});
});
I'm trying to create an effect that's, when the mouse over this change the background color from the left to the right.
I tried this:
http://jsfiddle.net/WVWKE/
$('#div1').mouseover(function(){
$('#back').animate({width: '200px'}, 1000);
});
$('#div1').mouseout(function (){
$('#back').animate({width: '0px'}, 1000).stop();
});
#div1{
height:200px;
width:200px;
background-color:green;
float:left;
}
#back {
width:0px;
height:200px;
background-color:Gray;
display: block;
}
<div id="div1">
<div style="position:absolute">That was amazing!</div>
<div id="back">
</div>
</div>
But, is not working correctly. If i put the mouse many times on the div, this do the effect many times and don't to.
Try to put the mouse and leave many times. The effect happens many times to.
Any help?
You are using stop incorrectly. Use it like this:
$('#div1').mouseover(function (){
$('#back').stop().animate({width: '200px'}, 1000);
});
$('#div1').mouseout(function (){
$('#back').stop().animate({width: '0px'}, 1000);
});
It's easy to understand if you think about it like it's English:
$('#back') // take "back"
.stop() // and stop it
.animate({width: '200px'}, 1000); // and animate it
Fiddle
Hello i have the following...
<span id="second" class="content1" style="width:0px; display:inline-block; overflow:hidden; float: left; white-space:nowrap;">
<p style="color:blue; background-color: #b5bdc8;">Camera Reviews</p>
</span>
<li class="laptop"></li>
and the script is:
$(document).ready(function () {
$('.slide1').click(function () {
$('#second').animate({
width: '120px',
}, 1000);
});
});
The problem is that i want the list to be displayed BLOCK... and work as it is PLUS i want the animation to toggle when i click on the list hide/show
Working code here: http://jsfiddle.net/gVjFs/81/
I'm going to ignore the dodgy markup (<li> inside <span> among other things). You can use toggle() here:
$('.slide1').toggle(function () {
$('#second').stop().animate({
width: '120px',
}, 1000);
}, function(){
$('#second').stop().animate({
width: '0',
}, 1000);
});
In your JSFiddle, you show that you are setting the CSS to block for ul li. But this won't work because you do not have any ul tags in your HTML. It also appears that you are using li tags incorrectly. An li tag is like a td tag: it does not make sense outside of its parent tag. For li's that would be an ol or a ul tag. If you want a little circle to click on, use an image of a little circle. Also, wrap your span / a section in a div. That will give you blocked display for free.
Use a combination of click() and toggleClass()
Something like this:
$("#click").click(function() {
$(this).toggleClass('whatever');
});
$(document).ready(function () {
$('.slide1, .slide2, .slide3, .slide4, .slide5').click(function () {
var elem = $('.' + $(this).attr('class').replace('slide','content')),
width = elem.width();
elem.animate({
width: width === 0 ? '120px' : 0,
}, 1000);
});
});
demo
I advise you to set a slide class to all your .slide1, .slide2, .slide3-elements.
I want to show one particular div with the use of fadeTo.
If I hover over div1, then spark1 should be visible and disappear on mouseout..
But it won't do anything when hovering and I don't really know why.
HTML
<div class="spark1"></div>
<div class="div1">text</div>
CSS
.div1 {
width:300px;
height:300px;
}
.spark1 {
position:absolute;
width:27px;
height:27px;
margin-top:70px;
margin-left:395px;
background:url(../img/spark.png) no-repeat;
}
JS
$('.div1').hover(function(){
$('.spark1').fadeTo(200, 0);
});
EDIT (update)
HTML
<div class="spark1"></div>
<div class="div1"></div>
CSS
.div1 {
width:300px;
height:300px;
background-color:#000000;
}
.spark1 {
position:absolute;
width:27px;
height:27px;
top:70px;
left:395px;
background-color:#ff0000;
filter:alpha(opacity=0); opacity:0.0;
}
JS
$('.project1').hover(function(){
$('.spark1').fadeTo(200, 1);
},
function(){
$('.spark1').fadeTo(200, 0);
});
It still won't trigger, I don't get it..
you should stop the animation if the event trigger before completion of previous. try this
$('.div1').hover(function(){
$('.spark').stop(true,true).fadeTo(200, 1);
},function(){
$('.spark').stop(true,true).fadeTo(200, 0);
});
fiddle example : http://jsfiddle.net/mK4m6/11/
Your code works if you use the correct css classes names
DEMO
You define a css class .spark { } but in you code you use the class name .spark1.
Choose one or the other.
You made a mistake in your hover function. It has 2 call back methods:
$(document).ready( function() {
$(".div1").hover(
function(event) {
//hover in
$(".spark1").fadeTo(200,1);
},
function(event) {
$(".spark1").fadeTo(200,0);
});
});
Below is a working script:
http://jsfiddle.net/U8rzJ/7/
Building on Didier's good catch of the class names, there's a problem with your hover() script. hover() can take one or two functions as arguments - if you supply just one, it's executed on both mouseover and mouseout. You'll want this, I think:
$('.div1').hover(function(){
//fade in to 100%
$('.spark').fadeTo(200, 100);
},
function(){
$('.spark').fadeTo(200, 0);
});
This fades the .spark in on mousein and fades it back out on mouseout. If you want to animate on mouseout only, I'd switch from .hover() to .mouseout().
HTML
<div class="spark1"></div>
<div class="div1">text</div>
CSS
.div1 {
width:300px;
height:300px;
}
.spark1 {
position:absolute;
width:27px;
height:27px;
top:70px;
left:395px;
background-color:#ff0000;
filter:alpha(opacity=0); opacity:.0;
}
jQuery
$('.div1').hover(function(){
$('.spark1').fadeTo(200, 1);
},
function(){
$('.spark1').fadeTo(200, 0);
});
Then it all works out.
1. Use correct class names
2. Set the initial opacity of spark1 to 0
3. On mouseenter fade the opacity to 1
4. On mouseleave fade the opacity to 0