I made with some help some Style to move a Text in if Mouse is over. My Problem is that I can't separate the moves. If I am over of any Box than all Boxes get the effect.
$(document).ready(function(){
$('.up-down').mouseover(function(){
$('.default').stop().animate({
height: 200
}, 200);
}).mouseout(function(){
$('.default').stop().animate({
height: 240
}, 200)
})
});
To see is here: http://jsfiddle.net/snHhN/
You have to select the child of the currently hovered element:
$(document).ready(function(){
$('.up-down').mouseover(function(){
$(this).children('.default').stop().animate({
height: 200
}, 200);
}).mouseout(function(){
$(this).children('.default').stop().animate({
height: 240
}, 200)
})
});
DEMO
Because you're using $('.default') then ever element with the class default will be acted upon.
If .default is inside .up-down you could use
$(this).find('.default')
... and it will only act upon the correct element.
Related
I have this jsfiddle:
$('.btn').click(function() {
if ($('nav').hasClass('open')) {
$('nav').removeClass('open');
$('.hide').animate({
width: '508px'
});
} else {
$('nav').addClass('open');
$('.hide').animate({
width: 'toggle'
});
}
})
where I'm trying to get a side navbar to just show icons then when the button is clicked to animate to get a specific width.
While the toggling works and it's getting the desired width, it's not animated.
Any ideas?
Consider the following.
https://jsfiddle.net/Twisty/ck7y19rz/6/
JavaScript
$('.btn').click(function(event) {
$("nav").toggleClass("open");
if ($("nav").hasClass("open")) {
$(".hide").show().animate({
width: "580px"
});
} else {
$(".hide").animate({
width: "0px"
}, function() {
$(".hide").hide();
});
}
});
This is largely just cleaned up code. As was commented, when you animate back to the original size, it must use a Width value, not a keyword, like auto. I also added .show() and .hide() to ensure the state of the element is returned to the expected visible state.
So, I'm sure there is a simple answer to this, but after 2 days of research I cannot find a solution.
The Story:
I have a dynamic page. When you get to one section and click on one of the 6 options it pulls up some info (name, place, etc.). I have a jQuery function that makes that info hide about half way after a few seconds. When you hover over that section with the mouse it also will animate up and back down as the mouse leaves it.
The Problem:
How do I make the whole function run again if another of those 6 option is clicked? Each time an option is selected the class with that info comes up, but after this function runs once (the delay part and animate down part) it just stays minimized unless you hover over it. I want it to appear every time and then run through the function. I have tried a number of things, and I'm sure there is a simple solution, just not sure what it is.
Here is a link to my codepen with a sample: http://codepen.io/jsegarra/pen/GxByr
I have also tried to wrap that all in a click function, for clicking on one of those 6 options and thought that would do the trick, but still the same thing:
$(document).ready(function () {
$('.title').click(function () {
$('.bottomTab').delay(5000).animate({
height: '50px' // to 50px
}, 'slow');
$(".bottomTab").hover(
//on mouseover
function () {
$(this).stop().animate({
height: '+=100' //adds 50px
}, 'slow');
},
//on mouseout
function () {
$(this).stop().animate({
height: '50px' //back to 50px
}, 'slow');
});
});
});
Just reset the div css before re-running the function
$(document).ready(function () {
$('.title').click(function () {
$('.bottomTab').css('height', '100px').delay(500).animate({
height: '50px' // to 50px
}, 'slow');
$(".bottomTab").hover(
//on mouseover
function () {
$(this).stop().animate({
height: '+=100' //adds 50px
}, 'slow');
},
//on mouseout
function () {
$(this).stop().animate({
height: '50px' //back to 50px
}, 'slow');
});
});
});
Here is the html I used with that javascript
<div class="title">title</div>
<div class="bottomTab">This is going to move from just being about 50 pixels high to about 100 pixels high after i add in some mouseenter and mouse out events</div>
I used the same CSS of your code pen, and the result was a full reclickable option
I don't see the problem. Your code seems to works fine. You've just typed an error while transfering to CodePen. Replace $('this').hover( with $('.bottomTab').hover(.
Basically I have a small div that is initially styled to 60x60. I have created click event that animates the expansion of the div:
$("#myDiv").click(function () {
$(this).animate(
{
width: "350px",
height: "300px"
}, 500);
}
I would like to reverse this animation if someone clicks the div again. Is there anyway to toggle between the original size and the expanded size (still using the animate function) with each click?
I found the toggleClass function but I don't think this will work with animiate.
You can see a basic fiddle here: http://jsfiddle.net/NS9Qp/
$("#myDiv").toggle(function() {
$(this).stop().animate({
width: "350px",
height: "300px"
}, 500);
}, function() {
$(this).stop().animate({
width: "60px",
height: "60px"
}, 500);
});
Example.
The jQuery toggle() function allows you to define two or more functions to cycle through on each mouse click. In this case, the first one (triggered on the first click) expands the div and the second one (triggered on the second click) resets it. On the third click, it starts back at the first one, and so on.
More about toggle() here.
just to be different :
var size=[];
$("#cornerBox").click(function(){
$(this).width() >= 350 ? size=[60, 60] : size=[350, 300];
$(this).stop().animate({ width: size[0], height: size[1] },500);
});
Fiddle: http://jsfiddle.net/NS9Qp/1/
I ended up using jQuery UI's animated toggleClass effect: http://jqueryui.com/demos/toggleClass/
super simple code:
$('h2').click(function() {
$(this).next().toggleClass("hidden", 1000);
});
Do not hardcode css styles (in my example I used inline css for myDiv element, put this in css files).
<div id="myDiv" style="background:red; width: 60px; height: 60px;"></div>
<script type="text/javascript">
var div = $('#myDiv');
div
.attr('defWidth', div.width())
.attr('defHeight', div.height())
.toggle(function() {
$(this).stop().animate({width: "350px", height: "300px"}, 500);
}, function() {
$(this).stop().animate({width: $(this).attr('defWidth'), height: $(this).attr('defHeight')}, 500);
}
);
</script>
What I do for cases like this, is store a transformation array.
var transforms = { 'height0': 60, 'width0': 60, 'height1': 300, 'width1': 350};
Then, store a toggle between 0 or 1, and use the corresponding values for the animation.
EDIT: combine this with the previous example of toggle, and you've got yourself a solid working solution!
I've got a basic little js/jquery function, but I can't seem to get the animation work for a change to the Body's "margin-top" - I need the current value of 3em to animate down to 0em. Here's my function:
$(".notify-close").click(function () {
$('#notify-container').css('display', 'none');
$('body').css("margin-top", "0em");
});
One part I can't figure out is how to remove pixels (or EM in this case) - for example, here's an idea regarding adding 50 pixels to a current margin-top, with a "+=50" value, but what's the REMOVAL equivalent to this in EM? Like "-3EM" ????:
$("body").animate({
margin-top: "+=50"
}, 1500 );
Did you try this?
$("body").animate({
margin-top: "-=50em"
}, 1500 );
$("body").animate({
margin-top: "50px"
}, 1500 );
I just used this script - it's not 100% animated in regards to changing the EM value for the body's margin-top value, but its a basic fix for now:
<script>
$(".notify-close").click(function () {
$('#notify-container').css('display', 'none');
$('body').css("margin-top", "0");
});
</script>
I have a <textarea> element in my form that has this code attached to it:
$('#links').focusin(function() {
$('#links').animate({
height: '100px'
}, 300, function() {
// done
});
});
This works perfectly, when the text area gets focus it increases in height nicely to 100px. Now, I want it to shrink back down to a suitable size based on the text inside it when it loses focus. I wrote this:
$('#links').focusout(function() {
$('#links').animate({
height: 'auto'
}, 300, function() {
// done
});
});
But it doesn't work, it just stays at the same height (100px). Is there any way to do this?
Thanks. :)
Edit: To save some confusion, the even handler for $('#links').focusout works fine, that's the first thing I tested. So I assume it's a problem with the animation or the CSS property.
Try $( '#links' ).blur( function(){ ... } ) instead
http://api.jquery.com/blur/
Edit, your actual code:
$('#links').blur(function() {
$('#links').animate({
height: 'auto'
}, 300, function() {
// done
});
});
Some other notes.. You can use $( '#links' ).focus() instead of focusin, and also, once you're in the function, you can use $( this ).animate(), as a shortcut. Just little tips and whatnot.
This isn't quite the same as what you're doing, but quite similar: http://james.padolsey.com/javascript/jquery-plugin-autoresize/
auto_height_link = $( '#links' ).css('height');
$('#links').focusin(function() {
$(this).animate({
height: '100px'
}, 300, function() {
// done
});
}).focusout(function() {
$(this).animate({
height: auto_height_link
}, 300, function() {
// done
});
});
but anyways the animate doesnt read the css value auto for height
i stumbled upon this http://www.unwrongest.com/projects/elastic/ which is what you need i guess
You can't use auto to animate in jQuery. You should set it to auto, then get the actual height (in px) and finaly animate it.
Take a look here