I have a website with multiple boxes and I want to create a function for the animations so I don’t have to add them to each hover box as some have different animations included.
For some reason I cannot call the animation in the box, if I copy the function code and place in the box it works fine but can get it working calling it from the function.
function aniIn() {
$(".br-t", this).stop().animate({ "width": "100%" }, 500, "easeOutQuint" ),
}
function aniOut() {
$(".br-t", this).stop().animate({ "width": "0"}, 900, "easeOutQuint" ),
}
$("a#box01").hover(function() {
$("#background").fadeIn(500);
aniIn();
}, function() {
$("#background").stop().fadeOut(900);
aniOut()
});
HTML:
Any help would be great.
TJ.
Try below code:
function aniIn(current) {
$(".br-t", current).stop().animate({ "width": "100%" }, 500, "easeOutQuint" ),
}
function aniOut(current) {
$(".br-t", current).stop().animate({ "width": "0"}, 900, "easeOutQuint" ),
}
$("a#box01").hover(function() {
$("#background").fadeIn(500);
aniIn(this);
}, function() {
$("#background").stop().fadeOut(900);
aniOut(this);
});
Related
Below is my code:
$(".menu").click(function( event ) {
event.preventDefault();
if ( !$( this ).hasClass("isDown") ) {
$(".menu-container").css("display", "block");
$(".menu-container")
.animate({ "height": "5%" }, 200 )
.animate({ "height": "2%" }, 200 )
.animate({ "height": "8%" }, 200 )
.animate({ "height": "100%" }, 1000 );
} else {
$(".menu-container")
.animate({ "height": "50%" }, 600 )
.animate({ "height": "65%" }, 200 )
.animate({ "height": "40%" }, 200 )
.animate({ "height": "0%" }, 400, function() {
$( this ).css("display", "none");
});
}
// use this class as indecator if menu open or not
$( this ).toggleClass("isDown");
return false;
});
When the (menu button) is clicked several times, the effect likewise occurs repeatedly.
How can I prevent that?
Add animation before adding the following code:
if(!$(".menu-container").is(":animated"))
I would like make a image burst to pieces, this animation should continue infinetly. Pls advice on how to proceed with this? Is it possible to use the jquery animate function to achieve this.
Try this,
http://jsfiddle.net/Dripple/AGGrv/.
This makes a fine animation of bursting a balloon.
$("#bubble1").click(function() {
$("#bubble1").stop(true, false);
$(this).hide("explode", {
pieces: 50
}, 250);
});
function animate1() {
$("#bubble1").animate({
"-moz-border-radius": "110px/100px",
"-webkit-border-radius": "110px 100px",
"border-radius": "110px/100px",
height: '100px',
width: '110px',
top: '240px'
}, 1500, animate2());
}
function animate2() {
$("#bubble1").animate({
"-moz-border-radius": "100px/110px",
"-webkit-border-radius": "100px 110px",
"border-radius": "100px/110px",
height: '110px',
width: '100px',
top: '235px'
}, 1500, function() {
$('#bubble1').trigger('mouseover');
});
}
$("#bubble1").mouseover(function() {
animate1();
});
$("#bubble1").mouseout(function() {
$("#bubble1").stop(true, false);
});
I am trying to replicate the www.winston.com homepage animation (that with the circles).
But so far I only managed to do THIS ( LINK HERE ) . How should I continue so when i`ll press now on those triangles, some text to appear and disappear according to the information.
I`d appreciate your help.
My jQuery code looks this way:
$("#green-circle").click(function () {
$("#green-circle").animate({
width: "120",
height: "120",
marginTop: "20",
marginLeft: "0"
}, 2000, "linear", function () {
$(this).after("");
}),
$("#blue-circle").animate({
width: "120",
height: "120",
marginTop: "20",
marginLeft: "5"
}, 2000, "linear", function () {
$(this).after("");
}),
$("#green-circle2").animate({
width: "120",
height: "120",
marginTop: "20",
marginLeft: "5"
}, 2000, "linear", function () {
$(this).after("");
});
});
HERE IS MY jsFiddle and HERE IS THE WEBSITE EXAMPLE
You need JQuery .one() function :
http://api.jquery.com/one/
This will allow a function to only be run once.
So what you can do is use the .one() function initially and add a new class or id to the elements, and then have a new function that will run off of the new class that was just added.
This will allow you to use 2 different functions, one for the start and then one afterwards.
I just want to create the animation like in this website http://www.msambition.de/. I have created 2 divs 1 on other. I have jquery code as below:
$(document).ready(function() {
$('div.unternehmen-ahover').hover(
function () {
$('div.unternehmen-ahover').slideToggle("slow");
$('span.span-picture-menu').fadeIn();
},
function () {
});
$('div.unternehmen').hover(
function () {
},
function () {
$('div.unternehmen-ahover').slideToggle("slow");
$('span.span-picture-menu').fadeOut();
});
});
Te problem is that on hver it works fine but it remains on other div sometimes and does not do slidetoggle. Kindly help me in this regards.
Thanks in advance
You should create mouseenter and mouseleave event handler for your div and there you should slideToggle. See this link.
$(document).ready(function ()
{
$(".tile2").mouseenter(function () {
$(".trainingmood").delay(0).animate({ opacity: 0 }, 300, "");
$(".text2 span").delay(100).animate({ opacity: 1 }, 300, "");
$(".text2").animate({ marginLeft: "-=310px" }, 300);
});
$(".tile2").mouseleave(function () {
$(".trainingmood").delay(0).animate({ opacity: 1 }, 300, "");
$(".text2 span").animate({ opacity: 0 }, 3, 00, "");
$(".text2").animate({ marginLeft: "+=310px" }, 300);
})
});
$comment.animate({width: 0}, {queue:false, duration:450 }, function() {
//$comment.css({ 'display': 'block' })
$comment.hide();
});
it doesn't show animation. i guess that i have put a function is wrong place.
Per the docs, if you specify options, include the callback in the options rather than separately:
$comment.animate({width: 0}, {
queue: false,
duration: 450,
complete: function() {
//$comment.css({ 'display': 'block' })
$comment.hide();
}
});