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);
})
});
Related
Here is my fiddle link.
jQuery('input').focusin(function(){
window.setTimeout(function() {
jQuery('input').addClass('animatedBottomBorder');
}, 150);
window.setTimeout(function() {
jQuery('input').addClass('animatedLeftBorder');
}, 300);
window.setTimeout(function() {
jQuery('input').addClass('animatedTopBorder');
}, 450);
window.setTimeout(function() {
jQuery('input').addClass('animatedRightBorder');
}, 600);
});
jQuery('input').focusout(function(){
jQuery('.searchTextField').removeClass('animatedBottomBorder');
jQuery('.searchTextField').removeClass('animatedLeftBorder');
jQuery('.searchTextField').removeClass('animatedTopBorder');
jQuery('.searchTextField').removeClass('animatedRightBorder');
});
In focusin event, borders start to fadein and in focusout event borders disappear.
But the line should look like building up while moving and quite fast. Now it loads in a fade in motion but I want it to be in a moving motion.
Please try the below code:
jQuery('input').focusin(function(){
window.setTimeout(function() {
jQuery('input').css({"border-right-color": 'blue'}).animate({
borderWidth: 4
}, 500, 'swing');
}, 150);
window.setTimeout(function() {
jQuery('input').css({"border-bottom-color": 'green'}).animate({
borderWidth: 4
}, 500, 'swing');
}, 300);
window.setTimeout(function() {
jQuery('input').css({"border-left-color": 'black'}).animate({
borderWidth: 4
}, 500, 'swing');
}, 450);
window.setTimeout(function() {
jQuery('input').css({"border-top-color": 'red'}).animate({
borderWidth: 4
}, 500, 'swing');
}, 600);
});
Hope this will help!!
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);
});
So I have got this code
$('.item').click(function () {
if ($(".secondary", this).is(":hidden")) {
$(".primary", this).toggle('slide', {
direction: 'right'
}, 500, function () {
$('.secondary', this).toggle('slide', {
direction: 'left'
}, 500);
});
}
});
Current behavior is that when I click .item, .primary slides to the right, but .secondary doesn't slide in at all.
Fiddle: http://jsfiddle.net/zm3zp6ax/
$('.item').click(function () {
var $this = $(this);
if ($(".secondary", this).is(":hidden")) {
$(".primary", $this).toggle('slide', {
direction: 'right'
}, 500, function () {
$('.secondary', $this).toggle('slide', {
direction: 'left'
}, 500);
});
}
});
DEMO
I'm trying to create a vertical menu which includes some animation.
I would like the user to hover over part of the the element which triggers the element to expand in width and show some text.
I have had a go at it for the past couple of days but feel i am now just making things worse!
Any help or advice on this would be much appreciated.
here is my fiddle: http://jsfiddle.net/danieljoseph/NZ2QL/3/
Here is the JQuery:
$("nav li").hover(function () {
$("nav li").css('width', 'auto');
});
$("#about-btn").mouseover(function () {
$("#about-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#about-btn").mouseout(function () {
$("#about-btn .tab").animate({
width: "0"
}, 1000);
});
$("#services-btn").mouseover(function () {
$("#services-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#services-btn").mouseout(function () {
$("#services-btn .tab").animate({
width: "0"
}, 1000);
});
$("#work-btn").mouseover(function () {
$("#work-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#work-btn").mouseout(function () {
$("#work-btn .tab").animate({
width: "0"
}, 1000);
});
$("#contact-btn").mouseover(function () {
$("#contact-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#contact-btn").mouseout(function () {
$("#contact-btn .tab").animate({
width: "0"
}, 1000);
});
I'm an amateur when it comes to JQuery so any tips and explanations would be great if possible.
Thanks.
Demo Fiddle
jQuery Code
$("nav li").hover(function () {
console.log($(this).children().children('.tab'));
$(".tab", this).stop().animate({
width: "190px"
}, 1000);
}, function () {
$(".tab", this).stop().animate({
width: "0"
}, 1000);
});
According to me direct children of <ul> must be only <li> so I even changed there position which was wrong in the fiddle you gave...
NOTE: This task could be done using pure css, which would be much lighter
Update Not part of the question:
The same above feature using plain css
I think that's what you really need:
http://jsfiddle.net/NZ2QL/25/
$(".menuItem").mouseover(function () {
var tab = $('.tab[data-id="'+$(this).data('id')+'"]').first();
tab.stop().animate({
width: "190px"
}, 1000);
});
$(".menuItem").mouseout(function () {
var tab = $('.tab[data-id="'+$(this).data('id')+'"]').first();
tab.stop().animate({
width: "0px"
}, 1000);
});
An interesting article that may help:
http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
Cheers ;)
What i'd recommend is placing the mouseout events on the .tab classes, and you should get what you want. I'll update your fiddle in a second to show you what i mean.
$("nav li").hover(function () {
$("nav li").css('width', 'auto');
});
$("#about-btn").mouseover(function () {
$("#about-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#about-btn .tab").mouseout(function () {
$("#about-btn .tab").animate({
width: "0"
}, 1000);
});
$("#services-btn").mouseover(function () {
$("#services-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#services-btn .tab").mouseout(function () {
$("#services-btn .tab").animate({
width: "0"
}, 1000);
});
$("#work-btn").mouseover(function () {
$("#work-btn .tab").animate({
width: "190px"
}, 1000);
});
$("#work-btn .tab").mouseout(function () {
$("#work-btn .tab").animate({
width: "0"
}, 1000);
});
$("#contact-btn").mouseover(function () {
$("#contact-btn .tab").animate({
width: "190px"
}, 1000);
$("#contact-btn .tab").mouseout(function () {
$("#contact-btn .tab").animate({
width: "0"
}, 1000);
});
http://jsfiddle.net/NZ2QL/11/
This is a little closer, but still needs some fixing.
That should be what you need. It could be cleaned up a little more to condense the code, but the functionality is what you want, I'm pretty sure.
http://jsfiddle.net/NZ2QL/76/
MY FINAL EDIT:
$(".menuItem li").hover(
function() {
$(this).stop().animate({"width":"250px"}, {queue:false, duration:1000});
$(this).children(".tab").animate({"width":"190px"}, {queue: false, duration:1000})},
function(){
$(this).stop().animate({"width":"60px"}, {queue:false, duration:1000});
$(this).children(".tab").animate({"width":"0px"}, {queue: false, duration:1000})}
);
Modified HTML and css are here:
http://jsfiddle.net/NZ2QL/81/
I have a div width id: "cen", and with a height and width of 50px.
$(document).ready(function() {
$("#cen").animate({
height: 500px,
width: "500px",
}, 5000, function() {
// Animation complete.
});
});
But it's not working.
Put quotes around 500px http://jsfiddle.net/myn9d/
$(document).ready(function () {
$( "#cen" ).animate({
height:"500px",
width:"500px",
}, 5000, function() {
// Animation complete.
});
});
Use this code, it's working:
$(document).ready(function() {
$("#cen").animate({
height: "500px",
width: "500px",
}, 5000, function() {
// Animation complete.
});
});
You have error in your syntax height should be surroung with "500px"
it should be
$(document).ready(function () {
$( "#cen" ).animate({
height:"500px",
width:"500px",
}, 5000, function() {
// Animation complete.
});
});
Please Checkout this demo Demo
$(document).ready(function () {
$( "#cen" ).animate({
height:"500px",
width:"500px",
}, 5000, function() {
});
});