I'm using jQuery for the first time, specifically on my own website, and I'm using the animate function to make an email tab move down slightly when hovered upon (check it out in the top right: http://www.tommaxwell.me). However, I don't know how to make the animation pause after completing. I can make the first animation and the animation necessary to have it return to its original state, but I want it to return to its original state after the user moves their cursor away. Here's the code, and keep in mind I realize why it doesn't work, I just don't know a solution as I'm new to jQuery.
$("#emailme").hover(function(){
$("#emailme").animate({
paddingTop: "15px"
}, 100, function() {
$("#emailme").animate({
paddingTop: "10px"
}, 100)
});
});
The second argument to hover is the callback to invoke when the user moves their mouse away.
$("#emailme").hover(function() {
$(this).animate({
paddingTop: "15px"
}, 100);
}, function() {
$(this).animate({
paddingTop: "10px"
}, 100)
});
So the general idea is:
$('selector').hover(function(){
//stuff to do on mouse in
}, function(){
//stuff to do on mouse out
});
You should use the functions $element.mouseover(fn) and $element.mouseout(fn).
So it should be like this:
$("#emailme").mouseover(function(){
$(this).animate({
paddingTop: "15px"
}, 100);
}).mouseout(function(){
$(this).animate({
paddingTop: "10px"
}, 100);
});
This means that attach event handlers to two different events: when you move your mouse over the element it expands and when you move your mouse out it subtracts - just as you want it.
Related
I want to run progressbar animation with scroll.
But it runs several times instead of once
Excuse me if it's not correct.
Please help me.
My code is:
<div class="demo-5" data-percent="80">
<script>
$(document).ready(function(){
$(document).scroll(function(){
$('.demo-5').percentcircle({
animate : true,
diameter : 100,
guage: 3,
coverBg:'#fff',
bgColor: '#efefef',
fillColor: '#8BC163',
percentSize: '48px',
percentWeight: '50px'
});
});
});
</script>
progressbar
</div>
A scroll event triggered every time a user scrolls to a different place in the element. In practice, it'll be triggered once for a smooth scrolling action, however if the scroll is 'jerky' or several small scrolls are made, this will trigger a number of times.
Check this,
I haven't tested yet, but I hope it works,
$(document).ready(function(){
$(document).scroll(function(){
$('.demo-5').fadeIn(200);
$('.demo-5').percentcircle({
animate : true,
diameter : 100,
guage: 3,
coverBg:'#fff',
bgColor: '#efefef',
fillColor: '#8BC163',
percentSize: '48px',
percentWeight: '50px'
});
setTimeout(function()
{
$('.demo-5').fadeOut(1000);
}, 500);
});
});
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(.
Let's say I have a little hover function on three boxes. When I hover over one, it animates and changes the background color. When the page loads, I want one to already be animated. If I hover on another box, it will disappear and then just animate whichever is hovered on.
Here is the JSFiddle
jQuery:
$(document).ready(function(){
$('.box').hover(function(){
$(this).stop().animate({
backgroundColor: "red"
}, 800);
},
function(){
$(this).stop().animate({
backgroundColor: "green"
}, 800);
});
});
Now how can animate the middle box when the page loads. Then allow the hover to work as normal (which includes the middle box animating back to normal).
You may try this
$(document).ready(function(){
$('.box').eq(1).animate({
backgroundColor: "red"
}, 800);
$('.box').hover(function(){
$('.box').stop().animate({
backgroundColor: "green"
}, 800);
$(this).stop().animate({
backgroundColor: "red"
}, 800);
},
function(){
$(this).stop().animate({
backgroundColor: "green"
}, 800);
});
});
DEMO.
Use a custom class:
$(document).ready(function(){
$('.box').hover(
function(){
$(this).stop().animate({
backgroundColor: "red"
}, 800,function(){
$('.box').removeClass('.animated');
})
},
function(){
$(this).stop().animate({
backgroundColor: "green"
}, 800);
});
})
The CSS:
.animated { background:red;}
You could experiment with where you want to put the removeClass. It may be better to add a function like the following:
$('.box').one('mouseover',function(e){
$('.box').removeClass('.animated');
})
I actually like that better, because it only fires once, but the difference is probably negligible. You could also take the function off the end of the first animate, and stick the line before the animate function is called. My guess is the way I suggested would be the smoothest looking. But, all ways will work.
I want to increase/decrease the font of and element, then the next element of that class and so forth, for a set of elements as <div class="test"></div> <div class="test"></div> ..... I mean
step 1: enlarging the first element and returning to normal size
step 2: enlarging the second element and returning to normal size
....
My basic code is
$(document).ready(function() {
$('.test').animate({
left:50,
fontSize: "2em"},
"slow")
.animate({
left:-50,
fontSize: "1em"},
"slow");
This will affect all the elements at once. How can I make a queue to make the changes one by one. Having one enlarged element at a time.
You could do it with
$('.test').each(function(idx){
var duration = 1200; // duration for all animations (2 x slow)
$(this)
.delay(duration*idx)
.animate({ left:50, fontSize: "2em" }, 'slow')
.animate({ left:-50, fontSize: "1em" }, 'slow');
});
Demo at http://jsfiddle.net/gaby/rz5Es/
For more precise control and more freedom on queuing look at my answer at a similar question:
A non-nested animation sequence in jQuery?
You need to use callbacks and an array of the elements you want to sequentially animate...
function animateSequence(elements){
var element = $(elements).first();
var originalSize = $(element).css('font-size');
elements = $(elements).not($(element));
$(element).animate(
{ fontSize: "2em" },
"slow",
function(){
$(this).animate(
{ fontSize: originalSize },
"slow",
function(){
if(elements.length > 0)
animateSequence(elements);
}
)
}
);
}
animateSequence($('.test'));
If you want to play with it: http://jsfiddle.net/xS7X7/
You will need to loop thru all elements and execute animate on each of them sequentially, here is sample code to do that recursively
function animate_sequential(elems, css, delay, index){
if(index===undefined) index = 0;
if(index >= elems.length) return;
$(elems[index]).animate(css, delay, function(){
animate_sequential(elems, css, delay, index+1)
})
}
animate_sequential($('div'), {'font-size':'30px'}, 500)
animate_sequential($('div'), {'font-size':'15px'}, 500)
See it in action http://jsfiddle.net/anuraguniyal/QJc9L/
It can be easily converted to a jQuery plugin, so that you can do $('div').animate_sequential and keep same interface as jQuery animate, you can also further enhance it so that it brings back to original css by passing the original css or getting it from element.
As I understand you are trying to do something like this,
$(document).ready(function() {
(function mycallback(i) {
var elems = $('.test');
elems.eq(i).animate({
left:50,
fontSize: "2em"}, function () {
mycallback(i + 1 < elems.length ? i + 1 : 0);
});
}(0));
});
DEMO
UPDATE:
It was an example code, you can change it like this if you want to reverse effects,
$(document).ready(function() {
(function mycallback(i) {
var elems = $('.test');
elems.eq(i).animate({
left:50,
fontSize: "2em"}, function () {
$(this).animate({
left:-50,
fontSize: "1em"},
"slow");
if (i + 1 < elems.length)
mycallback(i+1);
});
}(0));
});
UPDATED DEMO
So much simpler, readable, and scalable with Frame.js:
$('.test').each(function(i){
var element = $(this);
var originalSize = element.css('font-size');
Frame(function(next){
element.animate({ fontSize: "2em" }, "slow", next);
});
Frame(function(next){
element.animate({ fontSize: originalSize }, "slow", next);
});
});
Frame(function(next){
// add a callback after all the animations have finished
next();
});
Frame.start();
I want to call a function from within plugin, but the function is on the main page and not the plugin's .js file.
EDIT
I have jQuery parsing a very large XML file and building, subsequently, a large list (1.1 MB HTML file when dynamic content is copied, pasted, then saved) that has expand/collapse functionality through a plugin. The overall performance on IE is super slow and doggy, assuming since the page/DOM is so big.
I am currently trying to save the collapsed content in the event.data when it is collapsed and remove it from the DOM, then bring it back when it is told to expand... the issue that I am having is that when I bring the content back, obviously the "click" and "hover" events are gone. I'm trying to re-assign them, currently doing so inside the plugin after the plugin expands the content. The issue then though is that is says the function that I declare within the .click() is not defined. Also the hover event doesn't seem to be re-assigning either....
if ($(event.data.trigger).attr('class').indexOf('collapsed') != -1 ) { // if expanding
// console.log(event.data.targetContent);
$(event.data.trigger).after(event.data.targetContent);
$(event.data.target).hide();
/* This Line --->*/ $(event.data.target + 'a.addButton').click(addResourceToList);
$(event.data.target + 'li.resource')
.hover(
function() {
if (!($(this).attr("disabled"))) {
$(this).addClass("over");
$(this).find("a").css({'display':'block'});
}
},
function () {
if (!($(this).attr("disabled"))) {
$(this).removeClass("over");
$(this).children("a").css({'display':'none'});
}
}
);
$(event.data.target).css({
"height": "0px",
"padding-top": "0px",
"padding-bottom": "0px",
"margin-top": "0px",
"margin-bottom": "0px"});
$(event.data.target).show();
$(event.data.target).animate({
height: event.data.heightVal + "px",
paddingTop: event.data.topPaddingVal + "px",
paddingBottom: event.data.bottomPaddingVal + "px",
marginTop: event.data.topMarginVal + "px",
marginBottom: event.data.bottomMarginVal + "px"}, "normal");//, function(){$(this).hide();});
$(event.data.trigger).removeClass("collapsed");
$.cookies.set('jcollapserSub_' + event.data.target, 'expanded', {hoursToLive: 24 * 365});
} else if ($(event.data.trigger).attr('class').indexOf('collapsed') == -1 ) { // if collapsing
$(event.data.target).animate({
height: "0px",
paddingTop: "0px",
paddingBottom: "0px",
marginTop: "0px",
marginBottom: "0px"}, "normal", function(){$(this).hide();$(this).remove();});
$(event.data.trigger).addClass("collapsed");
$.cookies.set('jcollapserSub_' + event.data.target, 'collapsed', {hoursToLive: 24 * 365});
}
EDIT
So, having new eyes truly makes a difference. As I was reviewing the code in this post this morning after being away over the weekend, I found where I had err'd.
This:
$(event.data.target + 'a.addButton').click(addResourceToList);
Should be this (notice the space before a.addbutton):
$(event.data.target + ' a.addButton').click(addResourceToList);
Same issue with the "li.resource". So it was never pointing to the right elements... Thank you, Rene, for your help!!
I guess you should pass your function to the plugin as some argument, so it can call it.
// inside your plugin:
$.yourPlugin = function(f) {
f();
}
// on the main page
$.yourPlugin(yourFunction);
Other possibility would be to call a global function by name, but a plugin shouldn't rely on your own global function to exist.
Or provide some more context to your question, as your current description is way too brief.
It seems to me, that this plugin should be responsible for adding the events at the first place and then it can re-add them when necessary.
But when these click and hover events are really external to plugin, then you might want to take a look at jQuery live events.