I am trying to animate all of the parents of an element after the one clicked.
I have tried several iterations of the following:
$(this).parent().nextAll().animate({
marginTop: '-=50px'
}, 500);
But I don't think I am getting the syntax right...
The parent element has a class of ".useritem" and I have a feeling I have to use it but I am not sure where as I thought specifying that the parent>of this item>all of them after>move up 50 px, would work.
Any help, guidance or advice would go a long way, thank you.
Edit 1: HTML
My HTML is created dynamically based on the server response. It will look like this however:
<div id='useritem' class='useritem'>
<div id='msgnotification' class='msgnotification'>0</div>
<img id='userimg' class='userimg' src='data/here'>
<div id='usertxt' class='usertxt'>
<div id='name' class='name'>User</div>
<div id='username' class='username'></div>
</div>
<div id='useradd' class='useradd'><i class='fa fa-user-plus'></i></div>
</div>
There are multiples of these stacked and when a user clicks on 'useradd' it's width is animated to 0 and the marginTop code should fire on every 'useritem' under it moving them up.
Thank you for your input and thank you to #Barmar for pointing out that my code /should/ have worked, I went over it again and realised where I was going wrong. I had wrapped the marginTop code in a timeout to wait for the initial clicked parent element to have a set animated width of 0. But of course when you try to call 'this' again, the element isn't there so the code didn't have an initial selector.
I fixed this by using .delay() instead. And now my initial code is working just without the timeout!
Thank you again for your input and time. This is the updated code:
$(this).parent().animate({
'width': 0,
'padding-left': 0,
'padding-right': 0
}, 300, function() {
$(this).next().animate({
marginTop: '-=61px'
}, 300);
});
Related
Probably I didn't choose the best title for my question, sorry for that.
I'm pretty new with jQuery, hence with animations.
I'm just experimenting with It, but now I have a problem.
The script works like I want, but It seems a bit "buggy", I bet my code isn't optimized, at all... Plus I may be using a wrong way to achieve what I want.
One button is triggering the script (Its not supposed to be like that at the end, but momentarily I'm using this button to trigger the script), it works like a "toggle" and every time I click on "Show", a bunch of HTML is shown and two animations run:
$(".achievement_container").hide(300).show(); //shows the whole container
$(".glow").fadeIn(100).fadeOut(800); // First "brightening" effect
This one shows the whole "frame", while another animation runs for a lighting effect:
$(".ach_hover").css("left", "0px").css("opacity", "1").animate({
left: "252px",
opacity: "0"
}, 1100);
You can see a "working" example here:
http://jsfiddle.net/Frondor/6EA6W/
My problem appear after I click the "Show" button many times, the $(".ach_hover") animation start to fail and it doesn't appear, at all...
I'm not satisfied with the way I wrote this last animation, at least I think there might be a better and "standard" way to achieve this.
So I would really appreciate any suggestion from jQuery experts to "optimize" my script, and avoid any buggy behavior on it.
Thanks in advance
Try using jQuery .stop()
Stop the currently-running animation on the matched elements.
$(".ach_hover")
.css({
"left": "0px",
"opacity": "1"
})
.stop()
.animate({
left: "252px",
opacity: "0"
}, 1100);
Fiddle
I am designing a contact form which has a 'Thank you' message pop up on send, I need my thank you message to be positioned relative, other wise if the user happens to scroll while the animation is running the message remains stuck in place and ruins the animation. However positing the div relative keeps it in the position before it loads, what I need is a way to have the div display:none or opacity:0 BEFORE the send button is pressed, is that possible?
Here is an http://jsfiddle.net/gcQ8f/ to explain what I'm trying to achieve a little better
And below is the Javascript I'm using
$(document).ready(function(){
$(".send-button").click(function(){
$("#contact-form") .delay(1000) .animate({ height:'toggle', opacity:'toggle' }, (400));
$("#contact-form") .delay(3000) .animate({ height:'toggle', opacity:'toggle' }, (400));
$(".contact").reset();
});
});
Any help would be really appreciated :)
Thanks guys!
Just assign an ID or class (for example id="myThankYouDIV") to your DIV and hide it with display: none in your CSS. Then when you're ready to show it (when you click the button), just call $('#myThankYouDIV').show() $('#myThankYouDIV').fadeIn().
EDIT: I think I misunderstood your question a bit. You want to show the "Thank you" message after the animation is complete, right? You still need to hide it using CSS, but to show it just do this:
$("#contact-form") .delay(3000) .animate(
{ height:'toggle', opacity:'toggle' },
400,
function(){
// animation is complete
$('#myThankYouDIV').fadeIn();
}
);
;
I have a working jQuery sliding function that I have posted here below. I got it from another question on this site. It's great. Except I now want it to go the opposite direction.
I used this to slide from left to right. I tried adding a minus sign (-) in the animate function to make it {'-width': 'toggle'} but that just made it toggle on and off instead of sliding. I'm sure it's something simple, I'm just frustrated with it.
JS
$(document).ready(function(){
$('.pull-me').click(function(){
$('.panel p').css({
'width': $('.panel p').width(),
'height': $('.panel p').height()
});
$('.panel').animate({'width': 'toggle'});
});
});
And the html
html
<div class="panel">
<p id="novelDescrip">A website for a local musician to market, stream, and distribute music and merchandise. Content design and development</p>
</div>
</div>
<p class="slide"><div class="pull-me">Slide Out!</div></p>
When I click the More info tab, I want that panel to slide out to the left. Then if they click the More info tab again, it should close back up to the right into the more info tab.
Is there not a way to just reverse the direction of the function i'm already using?
Try this:
http://jsfiddle.net/FL87t/3/
$(document).ready(function(){
$('.pull-me').click(function(){
if ($('.panel').is(":hidden"))
{
$('.panel').show('slide', { direction : 'left'}, 500);
}
else
{
$('.panel').hide('slide', { direction : 'right'}, 500);
}
});
});
This should help you:
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
Read through it and you should find what your looking for.
Bare in mind that JQuery also has: .slideDown() & .slideUp()
But for changing the animation itself you're probably going to need CSS.
This goes in the opposite direction and sort of matches what you want to do in the image you just posted, try building off of it: JSFiddle
I want to achieve something like :
$("#left").hide('slide', {direction: 'right'}, 1000)
However I do not want the div to be hidden I want it to keep up space so I want have the visibility hidden like:
$("#left").css('visibility','hidden')
Yet still achieve the same effect as above.
This is what I'd do
$parent = $('#left').parent(); //store the parent of the element in a variable
$('#left').clone() //clone the existing element
.appendTo($parent) // insert it into the current position
.css('visibility','hidden') //set it's visibility to hidden
.end().end() //target the initial element
.slideUp() //do any slide/hide/animation that you want here, the clone will always be there, just invisible
This could be horrible, but it's the only way I could think of solving the problem :)
EXAMPLE: http://jsfiddle.net/skyrim/j2RWt/4
Try this:
var $content = $("#left");
var offset = $content.offset();
$("<div></div>").css({
width: 0,
position: "absolute",
left: offset.left,
top: offset.top,
height: $content.outerHeight(),
backgroundColor: "White"
}).appendTo("body")
.animate({
width: $content.outerWidth()
}, 1000, function () {
$content.css('visibility', 'hidden');
$(this).remove();
});
EDIT
So, after learning what the actual need was (:p), this method basically place another div over the original element. I've tested it on IE...and I'll edit this with an update after I do further testing on other browsers!
EDIT
Only Chrome seems to be having an issue with getting the correct height.
Added a callback which removes the makes visibility hidden (as LEOPiC suggested) and removes the slideout div
You can do it in very simple way. There is really a nice tutorial here to animate in different direction. It will surely help you. try this
$('#left').animate({width: 'toggle'});
EXAMPLE : http://jsfiddle.net/2p3FK/2/
EDIT: One more solution, this is very simple to move the div out of window with left margin
$("#left").animate({marginLeft:'1000px'},'slow');
EXAMPLE : http://jsfiddle.net/2p3FK/1/
I'm using this snippet to append an overlay to a whole site:
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div>");
$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});
});
It works great, only I need one element to sit above this overlay ID. I've given that element a z-index greater than the 5000 here, but it never seems to ascend above the gray overlay---any ideas?
Make sure it's a sibling and direct child of body to guarantee it'll work in IE along with giving it a position of anything other than static and a higher z-index than 5000.
Give it position:absolute too, or position:relative.
Make sure the element you want overlaying is positioned (like absolute or relative).. other wise z-index means nothing
1st check where exactly the 2nd element is being added in other words if ur assigning this value in JQuery but ur using plain css to code the 2nd elements values there may be a confliction. Also u should try using some quotes where ur values are i found that using double quotes with opacity values help.
Just a suggestion though instead of trying to dynamically assign elements using JQuery and give them properties might i suggest u try plain css when giving the elements attributes and only use JQuery to manipulate what needs to be calculated and or cannot be accomplished by css alone. Then ur code would be like this:
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div>");
$("#overlay").height(docHeight);
$("#overlay").css({"opacity":"0.4"});
});
and the element would also have the properties assigned by the default css file