This question has been already addressed, but none of the solutions have worked for me.
I referred to this earlier question addressing the same problem:
I noticed that one of the responses gave this jsfiddle link, which implements the exact functionality that I want, and works.
$("#topbar").toggle(function(){
$(this).animate({height:40},200);
},function(){
$(this).animate({height:10},200);
});
But when I changed the framework to anything but jQuery 1.4.4, the div starts instantly disappearing as soon as the page loads. This is the problem I've been having on my own project.
Any ideas on how to get that jsfiddle working on jquery 2.x? What am I missing?
The fix is simple:
$("#topbar").toggle(function () {
$(this).animate({
height: "40px"
}, 200);
}, function () {
$(this).animate({
height: "10px"
}, 200);
});
You just need to add px units to the height value.
See demo at: http://jsfiddle.net/audetwebdesign/3dd3s/
PS
Some of the other posted answers show a better way of coding this type of animation. I simply demonstrated how to fix the bug.
Note that this use of .toggle has been deprecated since jQuery 1.8.
Reference: http://api.jquery.com/toggle-event/
Why The Unit is Needed
Some of the other solutions involve the jQuery .height() function, which returns a unit-less pixel value. In this case, the computed value is coerced/cast to be a pixel value, so the 'px` unit is not required.
In the original example, the .height() function was not used so the units needed to be specified to make things work.
jQuery
$("#topbar").click(function () {
$(this).animate({
height: ($(this).height() == 40) ? 10 : 40
}, 200);
});
CSS
#topbar {
background: orange;
color: white;
display:block;
width:100%;
text-align:center;
height:40px;
}
HTML
<div id='topbar'>toggle me</div>
jsFiddle
Is this what you're going for?
http://jsfiddle.net/mmDCk/
$("#topbar").click(function() {
$(this).animate({
height: ($(this).height() == 10) ? 40 : 10
}, 200);
});
That will toggle the height to either 40 or 10 depending on what it is at the moment.
Related
I have two divs that I'm trying to keep on the page. I don't want them to move. Both have a unique id: search_box and menuButton. I tried implementing the following code and it worked for the part with the search_box id:
$(document).scroll(function() {
$("#search_box")
.stop()
.animate({
"marginTop": ($(window).scrollTop() + 5) + "px"
}, 0);
However when I tried to do it for the second div, it didn't work. I tried to create a class called test and to add the class to both divs and it didn't work. I tried $("#search_box" "#menuButton"). Since I'm very knew to js, at this point I'm not sure how to proceed.
You can do this with css
#search_box, #menuButton {
position: fixed;
top: 5px;
}
Another thing, this is way to use multiple jquery selector
$("#search_box, #menuButton")
Try this
$("#search_box", "#menuButton")
use comma as a separator.
The idea is to have images that appear on the page in a sliding way (sliding into place) and that part I managed to make.
What I don't seem to be able to achieve is to add some kind of easing to them - for example the image should go faster in the beginning and slow down right before reaching its destination.
I have the first part working on my website, but in the fiddle I created nothing works - anyway, this is it: http://jsfiddle.net/Sf5jC/ :
HTML:
<div id="click-me">
<div id="square"></div>
</div>
CSS:
#click-me {
width: 1000px;
height: 1000px;
}
#square {
position: relative;
left: 300px;
height: 100px;
width: 100px;
background-color: orange;
}
JS:
$('#click-me').click(function (e) {
e.preventDefault();
$('#square').animate({
left: 0
}, 500);
});
Could somebody please give me a suggestion? I'm quite a newbie in jQuery.
In fiddle nothing works because you did not select any library for it to work
Take a look at fiddle now Fiddle
And how about something like this to slow down
Fiddle
$('#click-me').click(function (e) {
e.preventDefault();
$('#square').animate({
left: 100
}, 500);
$('#square').animate({
left: 0
}, 1500);
});
As the commenter pointed out - you're missing jQuery from the fiddle which is why it doesn't work.
jQuery comes with 2 different easing options out of the box, swing (the default) and linear which as the name suggests is constant.
However, there's a really good library for different easing options that you can plug in - there's a link here and you can try out the different kinds on the page. Download it, include it in your website (after jQuery) and you can use the different easing methods.
To use easing in your code just add the type of easing after the duration. E.g.
$("#element").animate({"left":0},1000,"easingName");
I ran into a (bug?) with the newest versions of jQuery today where my recursion loop animating background position no longer works. Please see this example:
(this is working with version 1.9)
http://codepen.io/bonpixel/pen/qLkgt
Delete the cdn jquery and use the codepen bootstrap jquery (version 1.10.0) and it no longer loops. I saw the same results with jquery 2.0.1. It almost seems like it's specifically an issue with -= or += that i am using for the background positioning? Its as though the value used to calculate the new position is not updated after (or during) the animation.
Any thoughts?
(edit adding static code)
HTML
<div class="blue"><div>
CSS
.blue{
width: 100px;
height: 190px;
background: transparent;url(http://2.bp.blogspot.com/-6xJXVFMdC64/TckciX_eI7I/AAAAAAAAAEc/IYORj5mZXiY/s1600/wlk01.gif) 0 0 repeat-x;
}
JS
var backgroundSlidingLeft = function () {
$('.blue').animate({
'background-position-x': '-=100px',
'background-position-y': '0px'
}, 1000, 'linear', backgroundSlidingLeft);
};
backgroundSlidingLeft();
#darkajax answered it completely via bugs.jquery.com/ticket/13939
"Relative animation (using += or -=) is broken in 1.10.0."
Thanks!
it's 3 am right now and I'm not the best at jquery, can someone tell me what stupid mistake I'm making?
I have it in a jsfiddle here: http://jsfiddle.net/JamesKyle/7GWRp/
There's a kink in css transitions that don't allow them to be used on :before or :after elements, so I'm trying to do a workaround using jquery which is already being used on the page. Basically these are the three css state normal, hover, and active.
(I'm trying to animate the little shine at the top)
$(document).ready(function() {
$('.button:before').mouseover(function() {
$(this).animate({
left: '0px',
opacity: 1
}, 100);
});
$('.button:before').click(function() {
$(this).animate({
left: '30px',
opacity: 0
}, 100);
});
$('.button:before').mouseout(function() {
$(this).animate({
left : '-30px',
opacity : '1'
}, 100);
});
});
The verdict here is that, since pseudo elements are not part of the DOM, they cannot be directly targeted with jQuery.
Inserting a physical element like <div class="button gray"><span></span>Button</div> seems to me to be the easiest solution but it does clutter the markup...
I've seen a jquery plugin that was able to "expand" horizontally a <pre> element when you moved your mouse over it.
But I don't remember it's name or where to find it...
Does anyone know?
You can do it without a plugin.
See the following on jsFiddle →
I also like to set overflow-x on the expanded pre so that one can still scroll to see lines that are wider than the expanded size. I don't like scroll bars on the narrower ones, so I set overflow to hidden in the CSS and on mouseleave.
$(function() {
$('pre').mouseenter(function() {
$(this).stop().animate({
width: 400
}, function() {
$(this).css('overflow-x','auto');
});
}).mouseleave(function() {
$(this).stop().animate({
width: 200
}, function() {
$(this).css('overflow','hidden');
});
});
});
Assuming the CSS is as follows:
pre {
width: 200px;
overflow: hidden;
}
Or even better! Use a figure and figcaption element to provide a handy tip for each code listing as seen here.
On top of that, you could use a jQuery plugin like ScrollTo to ensure that the code scrolls back to the left whenever the mouse leaves it.
You don't need a plugin for this. You can do this using the animate() function.
$('div').bind({
mouseover: function() {
$(this).stop().animate({
width: 300
})
},
mouseout: function() {
$(this).stop().animate({
width: 100
})
}
})
Check working example at http://jsfiddle.net/zgTw3/2/
are you looking for this www.sohtanaka.com ?