JQuery animated vertical menu - javascript

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/

Related

Affecting only one element with jQuery toggle

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

Javascript Animate not working

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() {
});
});

Two divs on each other animation

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);
})
});

How to animate the width with slide effect (jquery)?

How do I animate the width with a slide effect to the right?
Here's my code:
$(".toggle").click(function(){
$(".wrapper").animate({ width: "80%" });
});
Thank you!
You could do this:
$(".toggle").click(function () {
$(".wrapper").animate({
width: "80%"
}, {
duration: 1000,
specialEasing: {
width: 'linear'
}
});
});
FIDDLE DEMO
$("#go").click(function(){
$("#block").animate({
width: "70%"
}, 1500 );
});

Javascript - how can I properly shrink this code

Regarding the browser version, the player height should change
if older then ie9
//height is fixed
else
//height is auto
The above code is working but, it's the worst thing I've seen, because I do repeat myself again and again, when only one line changes on this conditional.
<script type="text/javascript">
$(document).ready(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<9) {
$("#jquery_jplayer_1").jPlayer({
ready: function ()
{
$(this).jPlayer("setMedia",
{
m4v: "/video/videoK.mp4",
ogv: "/video/videoK.ogg"
}).jPlayer("play");
$('article.about-k').hide();
olark('api.box.hide');
},
swfPath: "/scripts/",
supplied: "m4v, ogv",
size: {
width: "100%",
height: "400px" // THE ONLY CHANGE IS HERE
},
backgroundColor: "#fff",
click: function() {
$(this).jPlayer("play");
},
ended: function() {
$('.jplayer-k').hide();
$('article.about-k').show();
}
})
} else {
$("#jquery_jplayer_1").jPlayer({
ready: function ()
{
$(this).jPlayer("setMedia",
{
m4v: "/video/videoK.mp4",
ogv: "/video/videoK.ogg"
}).jPlayer("play");
$('article.about-k').hide();
olark('api.box.hide');
},
swfPath: "/scripts/",
supplied: "m4v, ogv",
size: {
width: "100%",
height: "auto" // THE ONLY CHANGE IS HERE
},
backgroundColor: "#fff",
click: function() {
$(this).jPlayer("play");
},
ended: function() {
$('.jplayer-k').hide();
$('article.about-k').show();
}
})
}
});
</script>
As noted by the comments, the only change is on ONE single line.
How can I remake this, without stupidly repeating myself ?
height: "auto" //THIS IS THE ONLY DIFFERENCE!
Please advice
That's quite simple with a ternary operator:
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "/video/videoK.mp4",
ogv: "/video/videoK.ogg"
}).jPlayer("play");
$('article.about-k').hide();
olark('api.box.hide');
},
swfPath: "/scripts/",
supplied: "m4v, ogv",
size: {
width: "100%",
height: ($.browser.msie && $.browser.version.substr(0, 1) < 9)
? "400px"
: "auto"
},
backgroundColor: "#fff",
click: function () {
$(this).jPlayer("play");
},
ended: function () {
$('.jplayer-k').hide();
$('article.about-k').show();
}
})
If you don't like that (e.g. because of a more complex condition), you still can use a simple variable:
var height = "auto";
if (/* IE too old */)
height = "400px";
$…({
… // huge config object
height: height,
…
});
Why not:
<script type="text/javascript">
$(document).ready(function() {
if('<?= $cookie; ?>' > '1' || $(window).width() <= 768) {
$('.jplayer-k').remove();
$('article.about-k').show();
}
$("#jquery_jplayer_1").jPlayer({
ready: function ()
{
$(this).jPlayer("setMedia",
{
m4v: "/video/videoK.mp4",
ogv: "/video/videoK.ogg"
}).jPlayer("play");
$('article.about-k').hide();
olark('api.box.hide');
},
swfPath: "/scripts/",
supplied: "m4v, ogv",
size: {
width: "100%",
height: ($.browser.msie && $.browser.version.substr(0,1)<9) ? "400px" : "auto"
},
backgroundColor: "#fff",
click: function() {
$(this).jPlayer("play");
},
ended: function() {
$('.jplayer-k').hide();
$('article.about-k').show();
}
})
It could be like this:
<script type="text/javascript">
$(document).ready(function() {
if('<?= $cookie; ?>' > '1' || $(window).width() <= 768) {
$('.jplayer-k').remove();
$('article.about-k').show();
}
height = $.browser.msie && parseInt($.browser.version, 10) < 9 ? '400px' : 'auto';
$("#jquery_jplayer_1").jPlayer({
ready: function ()
{
$(this).jPlayer("setMedia",
{
m4v: "/video/videoK.mp4",
ogv: "/video/videoK.ogg"
}).jPlayer("play");
$('article.about-k').hide();
olark('api.box.hide');
},
swfPath: "/scripts/",
supplied: "m4v, ogv",
size: {
width: "100%",
height: height
},
backgroundColor: "#fff",
click: function() {
$(this).jPlayer("play");
},
ended: function() {
$('.jplayer-k').hide();
$('article.about-k').show();
}
})
});
</script>
UPDATE:
I added to code above the Fabriccio Matte suggestion so your code dont fail with IE10
Try:
var playerObj = { ready : function () { /* ... */ }, size : /* AUTO */ };
if (/*stupid IE TEST*/) {
playerObj.size.height = "...";
}
$("#jquery_jplayer_1").jPlayer(playerObj);
Separate your configuration from your processes, and it becomes much less of a hassle.
Also, like #Bergi said, a ternary-operation:
value = (test_with_optional_parentheses) ? passed_value : failed_value;
...or in this case, as an object parameter:
{ value : (test_with_optional_parentheses) ? passed_value : failed_value };
Works perfectly well for changing one thing, inline, in the middle of a configuration object.
Keep my advice in mind for organizing large blocks of code, when you start confusing what you need to do with what you're currently doing.
Keep Bergi's advice in mind for when you need to set one single value (at a time), based on a simple test.

Categories