$(".fader").click(function (e) {
$('.fader').not('#' + $(this).attr("id")).fadeOut(function() {
$($(this).attr("id")).animate({width: "200",height: "200px", top: "-=-440px", left: "-=-367px"});
});
});
fading out works, animate() works too but with different elements.
Is it the syntax to blame or my CSS that is blocking animate()?
You do not need to do $($(this).attr("id")) as $(this) is fine.
Also, the inner jQuery selector changes the meaning of 'this' to be different. If you want it to stay the same, you need to keep a reference to it first e.g.
$(".fader").click(function (e) {
var self = this;
$('.fader').not(self).fadeOut(function() {
$(self).animate({width: "200",height: "200px", top: "-=440px", left: "-=367px"});
});
});
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.
I am dynamically creating a page (in VB) and thus have a number of elements with the same class. I need to animate these individually, not as a group. I have done this in the past with the this selector. But I can't seem to get it functioning now.
$(".img").on("mouseover", function () {
$(".img").animate({
right: '75px',
speed: 'fast'
});
});
Replace the string selector with this
$(".img").on("mouseover", function () {
$(this).animate({
right: '75px',
speed: 'fast'
});
});
Inside the handler, this will be the specific .img instance in which the mouse hovered
Is there a way to toggle a single CSS property using the animate() function without hiding it?
Something like this;
$(".block").animate({ 'border-width': 'toggle' }, 1000);
I cannot use the toggleClass(), addClass() or removeClass(). The reason for this is that it has an unwanted effect on the size of the element that is animated (see JSFiddle).
You can find a JSFiddle here.
What I can think of is this;
if(parseInt($(".block").css('border-width'))) {
$(".block").animate({ 'border-width': '0'});
}
else {
$(".block").animate({ 'border-width': '100px'});
}
..Or something like this by adding a class to the element. But I would prefer not to use an if statement. I wonder if this is possible in a single line of code. Feels like it should be.
try using this, in your css:
.block1,
.block2 {
display: inline-block;
vertical-align: top;
color: white;
height: 100%;
width: 50%;
transition: all, 1s;
}
.no-border-top {
border-top-width: 0;
}
then simply toggle no-border-top class, you can see it here
You can use variables to define toggle effect:
var currentBorderW = 0;
$('.block1').on('click', function(){
var nextBorderW = parseInt($(this).css('border-width'));
$(this).animate({ 'border-width': currentBorderW + 'px' }, 1000);
currentBorderW = nextBorderW;
});
Here is working jsFiddle.
Does this do what you want?
$('.block1').on('click', function(){
$(this).animate({ 'border-width': '-=100px' }, 1000);
});
$('.block2').on('click', function(){
$(this).children().first().show();
$(this).toggleClass('borderTop', 1000);
});
JS Fiddle for this code sample
Everything else is the same: your CSS, HTML, etc. I only changed the property border-width to have a value of -= 100px.
I used the -= operator, per the jQuery API docs:
Animated properties can also be relative. If a value is supplied with a leading += or -= sequence of characters, then the target value is computed by adding or subtracting the given number from the current value of the property.
EDIT: To make it slide back in again, see this example on JSFiddle
(function(){
var clickCount=0;
$('.block1').click(function(){
if (clickCount%2==0) {
$(this).animate({ 'border-width': '-=100px' }, 1000);
}
else {
$(this).animate({ 'border-width': '+=100px' }, 1000);
}
clickCount++;
});
})();
$('.block2').on('click', function(){
$(this).children().first().show();
$(this).toggleClass('borderTop', 1000);
});
I have this semi-slider-style UI where new terms are added in from the left: http://jsfiddle.net/v4v5cvkz/. I'm using the jQuery prependTo function to do this. My issue is that I want the terms that are already displayed to perform an animated slide to the right when a new term gets added, rather than suddenly "appear" in the correct position. I did try adding a "displayed" class to terms that had successfully shown up, and tried adding a slide-to-right animation after that, but that didn't quite achieve the effect I was going for (the "displayed" objects were moved much further to the right than I expected).
Here is the problematic code (you'll probably want to view the fiddle to see it in context though):
function addToStream(term, delay) {
setTimeout(function(){
$("<div />")
.addClass("stream_term")
.html(term)
.css({
opacity: 0
})
.prependTo("#stream_terms")
.animate({opacity:1},
{ duration: 1000,
complete: function() {
$(this).addClass("displayed");
}
});
}, delay);
}
Any help here would be greatly appreciated. Thank-you!
*Note: I have access to jQuery UI in my code, though it isn't linked in the fiddle. Also, if anyone knows of a plugin that can do this sort of thing better than I can, please let me know. The closest one I was able to find was Fraction Slider, but I didn't find it obvious how to create a similar UI with it (it might also be overkill for my purposes).
Here's a way to do it:
function addToStream(term, delay) {
setTimeout(function(){
var newDiv = $("<div />");
newDiv.addClass("stream_term")
.html(term)
.css({
opacity: 0,
display: 'none'
}).prependTo("#stream_terms");
var width = newDiv.width();
var height = newDiv.height();
newDiv.css({
width: 0,
height: height,
display: 'inline-block'
})
.animate({
width: width,
margin: '0 10px',
padding: '5px 10px'
}, 1000)
.animate({opacity: 1}, 1000, function(){
$(this).addClass("displayed");
});
}, delay);
}
It also needs the following CSS changes:
.stream_term {
padding: 0;
margin: 0;
overflow: hidden;
}
DEMO: http://jsfiddle.net/StathisG/hqg29p6r/1/
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