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
Related
I have an object accordionOptions which mediates the behavior of an accordion object
on my page. It looks like:
var accordionOptions = {
icons: {
header: 'ui-icon-circle-arrows-e',
activeHeader: 'ui-icon-notice'
},
animate: {
easing: 'easeOutBounce',
duration: 1000
}
}
I'm using that object to determine the behavior of my accordion like so:
$('#accordion1').accordion({
icons: accordionOptions.icons,
animate: accordionOptions.animate
});
I have an anchor tag on my page that when clicked I intend for it to have the same animation as the accordion when a new panel is clicked:
$('#btnChange').click(function () {
$('#test').animate({
easing: accordionOptions.animate.easing
});
});
You can see in the fiddle here this doesn't work. I've tried several things, all were non-successes. How can I attach my desired behavior to the test div using my accordionOptions argument?
Using easing for .animate is slightly different than for .accordion -- you need to pass the duration and easing separately from what should be animated. You should set a height or whatever property it should animate.
$('#test').animate({ height: 100 }, accordionOptions.animate.duration, accordionOptions.animate.easing);
Or shorter syntax similar to how you were originally doing it:
$('#test').animate({ height: 100 }, accordionOptions.animate);
Updated fiddle: http://jsfiddle.net/C6Eax/1/
$(".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"});
});
});
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!
Im new to learning JQuery. Im doing a sample from JQuery Novice to Ninja and Im getting an error when I move my mouse over then next item. The #navigation_blob dissapears it could be a css problem for all I know but run the code tell me what you think I need to do. Im using the easing plugin
$(document).ready(function () {
$('<div id="navigation_blob"></div>').css({
width: $('#navigation li:first a').width() + 10,
height: $('#navigation li:first a').height() + 10
}).appendTo('#navigation');
$('#navigation a').hover(function () {
$('#navigation_blob').animate(
{ width: $(this).width() + 10, left: $(this).position().left },
{ duration: 'slow', easing: 'easeOutElastic', queue: false }
)
}, function () {
$('#navigation_blob')
.stop(true)
.animate(
{width: 'hide'},
{duration: 'slow', easing: 'easeOutCirc', queue: false}
)
.animate({
left: $('#navigation li:first a').position().left }, 'fast'
);
});
});
<style type="text/css">
#navigation li
{
display:inline-block
}
#navigation_blob
{
background-color:Blue; position:absolute; float:left
}
</style>
<ul id="navigation"><li>Home</li><li>About Us</li><li>Buy!</li><li>Gift Ideas</li></ul>
I think your problem is the width: 'hide' in the first .animate() of the second .hover() function:
//...
}, function () {
$('#navigation_blob')
.stop(true)
.animate(
{width: 'hide'},
//...
I think your blob will, essentially, have display: none; once that animation completes so further manipulations of its width or position will have no visible effect. If you say {width: 0} it should work okay: http://jsfiddle.net/ambiguous/YaVzd/
You can also try adding an explicit .show() before the hover-in animation but that produces some odd effects: http://jsfiddle.net/ambiguous/uH9yJ/1/
It looks like the version of jQuery is the culprit here. In this fiddle everything looks fine (using jQuery 1.4.2). However, if you change the version to 1.4.4 (the latest version), things start acting weird. Additionally, I downloaded the code from this book and it looks like the version of jQuery that this sample is using 1.4.
This makes sense if the author's update log is correct. According to the plugin's website, the last update was 12/11/07, which may mean development has stopped, but at the very least it probably means the plugin is out of date.
Hope that helps.
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