I am making a site where I have a tabbed area (three tabs) which when hovered on, fade in different height divs.The page loads with the divs hidden and are only to fade in the corresponding div when the link is hovered on. If any div is already shown, it should fade out (or ideally appear to fade into the next div).I've already formed two methods but they have messy results, especially when dragging the mouse randomly across the links; too many divs appear and animations run before others finish.Any ideas on how I can make this work would be greatly appreciated; so what's there is replaced with the next div.Here's whats failed so far:
Version 1
$(function () {
$('#one-box').hide();
$('#two-box').hide();
$('#three-box').hide();
// Box one
$('#one-link').hover(function () {
$('#two-box').fadeOut(300);
$('#three-box').fadeOut(300);
$('#one-box').delay(400).fadeIn(300);
});
// Box two
$('#two-link').hover(function () {
$('#one-box').fadeOut(300);
$('#three-box').fadeOut(300);
$('#two-box').delay(400).fadeIn(300);
});
// Box three
$('#three-link').hover(function () {
$('#one-box').fadeOut(300);
$('#two-box').fadeOut(300);
$('#three-box').delay(400).fadeIn(300);
});
});
Version 2
$(function () {
$('#one-box').hide();
$('#two-box').hide();
$('#three-box').hide();
// Box one
$('#one-link').hover(function () {
$('#two-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow', function () {
$('#three-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow', function () {
$('#one-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow');
});
});
});
// Box two
$('#two-link').hover(function () {
$('#one-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow', function () {
$('#three-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow', function () {
$('#two-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow');
});
});
});
// Box three
$('#three-link').hover(function () {
$('#one-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow', function () {
$('two-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow', function () {
$('#three-box').animate({
opacity: 'toggle',
height: 'toggle'
}, 'slow');
});
});
});
});
Try decreasing your fadeOut time:
$('#one-link').hover(function () {
$('#two-box').fadeOut(100);//100 ms as an example
$('#three-box').fadeOut(100);
$('#one-box').delay(400).fadeIn(300);
});
or you can try as a crude solution:
$('#one-link').hover(function () {
$('#two-box, #three-box').fadeOut(300, function() {
$('#one-box').fadeIn(300);
});
});
Related
I am not sure why the following doesn't work. I inspected and it successfully changes the class names but when I click on tab it doesnt move.
var main=function() {
$('.uptab').click(function() {
$('.headbar').animate({
top: '10px'
}, 600);
$('.tab').animate({
top: '45px'
}, 600);
$('.tab').removeClass('uptab');
$('.tab').addClass('downtab');
});
$('.downtab').click(function() {
$('.headbar').animate({
top: '-40px'
}, 600);
$('.tab').animate({
top: '-5px'
}, 600);
$('.tab').removeClass('downtab');
$('.tab').addClass('uptab');
});
};
$(document).ready(main)
How can i push my content the same as another content? OK i know the question seems kind of vague but what I want to do is push my content like the way another script is pushing its content. What is doing when clicking the button it will push the content from the side causing the div to contract. I am not too far so maybe somebody can help. This is the script that works:
$(function(){
var $trigger = $(".icon-menu-2");
var $menu = $(".c_left");
$trigger.toggle(function show() {
$menu.animate({ width: 185, marginLeft: 0, display: 'toggle'}, 'slow');
$(".c_right").animate({ marginLeft:185, display:'toggle'}, 'slow');
}, function hide() {
$menu.animate({ marginLeft: -185, display: 'toggle'}, 'slow');
$(".c_right").animate({ marginLeft:0, display:'toggle'}, 'slow');
});
})
http://jsfiddle.net/Ndvbn/2/
Here is the script that needs just a small touch up so that it will push the content just like the script above does when clicking on test. Here is the script:
var timer;
$("#slideout").animate({right:'0px', queue: false, duration: "slow"}, function () {
timer = setTimeout(function () {
$("#slideout").animate({right:'-280px'}, {queue: false, duration: "slow"})
}, 500);
});
$("#clickme2").click(function () {
if ($("#slideout").css("right") == "-280px"){
$("#slideout").animate({right:'0px'}, {queue: false, duration: 500}, function () {
clearTimeout(timer);
});
} else {
$("#slideout").animate({right:'-280px'}, {queue: false, duration: 500}, function () {
clearTimeout(timer);
});}
});
http://jsfiddle.net/5UpHk/4/
Can anybody post the code so that my second script will push the content to the left?
This script below will push the content to the left. I made a couple of changes to the CSS as well. Check out the demo and code here: http://jsfiddle.net/BdKhW/1/
var timer;
$("#slideout").animate({width:'275px'}, {queue: false, duration: "slow"}, function () {
timer = setTimeout(function () {
$("#slideout").animate({width:0}, {queue: false, duration: "slow"})
$(".c_left").animate({marginRight:0}, {queue: false, duration: "slow"})
}, 2000);
});
$(".c_left").animate({marginRight:'275px'}, {queue: false, duration: "slow"})
$("#clickme2").click(function () {
$("#slideout").animate({width:0}, {queue: false, duration: "slow"})
$(".c_left").animate({marginRight:0}, {queue: false, duration: "slow"})
});
I've been fighting with this for a few hours now (I'm a bit new to js) and I decided to put it up to the community. I have this web app I'm building that is all based on percentages of screen sizes. The divs are fixed position, contents absolute within those divs. Here is the fiddle: http://jsfiddle.net/MycF6/31/ and the code I'm working with:
$(document)
.ready(function () {
$("#socialDash")
.click(function () {
$("#socialStream")
.hide("slide", {
direction: "left"
}, "1000");
});
});
$("#socialDash")
.click(function () {
$("#workBench")
.effect("scale", {
percent: 178,
origin: ['middle', 'right'],
direction: 'horizontal'
}, 700);
});
$("#niner")
.click(function () {
$("#socialStream")
.show("slide", {
direction: "left"
}, "1000");
$("#workBench")
.effect("scale", {
percent: 56,
origin: ['middle', 'right'],
direction: 'horizontal'
}, 500);
});
$(".socialButton")
.click(function () {
$("socialButton")
.removeClass(".clicked");
$(this)
.addClass(".clicked");
});
I want it so when I click the top button on the left (1) the left div of the inside content slides left and the div on the right expands to take its place. For the other two buttons (2),(3), I want the divs in original proportion. The other issue is when buttons (imgs) are clicked they have background that remains persistent instead of swapping to the next clicked button as I have tried to identify in that last bit of code.
Any help would be greatly appreciated. Thanks in advance!
Okay, I found a solution (basically I rewrote everything). It isn't pretty, but it works. Here is the new jfiddle: http://jsfiddle.net/MycF6/42/ if you are interested.
And the script:
$(document).ready(function () {
$("#dash").click(function () {
$("#stream").animate({
width: "0"
}, "fast").hide("slide", {
direction: "left"
}, "fast");
$("#dash").addClass("clicked");
$("#fb").removeClass("clicked");
$("#twit").removeClass("clicked");
$("#work").animate({
width: "100%"
}, "slow");
});
$("#twit").click(function () {
$("#work").animate({
width: "59%"
}, "fast");
$("#twit").addClass("clicked");
$("#dash").removeClass("clicked");
$("#fb").removeClass("clicked");
$("#stream").animate({
width: "40%"
}, "fast").show("slide", {
direction: "left"
}, "slow");
});
$("#fb").click(function () {
$("#work").animate({
width: "59%"
}, "fast");
$("#twit").removeClass("clicked");
$("#dash").removeClass("clicked");
$("#fb").addClass("clicked");
$("#stream").animate({
width: "40%"
}, "fast").show("slide", {
direction: "left"
}, "slow");
});
});
Do not execute until previous is completed. If you click quickly, the script is incorrect. If I click several times, the function will be executed without waiting for completion. It becomes messy.
$(".vid1 .next, .vid2 .next").click(function(){
$(".type2").find(".crop").find(".left").find("div:last").clone().insertAfter($(".type1").find(".crop").find(".left").find("div:last"));
$(".type2 .crop .left div:first").animate({marginLeft: '0px'}, 0);
$(".type1").find(".crop").find(".left").find("div:first").clone().insertBefore($(".type2").find(".crop").find(".left").find("div:first"));
$(".type2").find(".crop").find(".left").find("div:first").animate({marginLeft: '0px'}, 0);
$(".type1").find(".crop").find(".left").find("div:first").animate(
{marginLeft: '0px'}, {
duration: 500,
complete: function() {
$(".type1").find(".crop").find(".left").find("div:first").remove();
$(".type1").find(".crop").find(".left").find("div:first").animate({marginLeft: '208px'}, 0);
}
});
$(".type2").find(".crop").find(".left").find("div:first").animate(
{marginLeft: '208px'}, {
duration: 500,
complete: function() {
$(".type2").find(".crop").find(".left").find("div:last").remove();
}
});
});
You can initialize a variable to True when starting the Click, in Complete return it to False.
Every time he comes to click, check if True, then exit the function.
var isClicking=false;
$(".vid1 .next, .vid2 .next").click(function(){
if(isClicking)
return;
isClicking=true;
$(".type2").find(".crop").find(".left").find("div:last").clone().insertAfter($(".type1").find(".crop").find(".left").find("div:last"));
$(".type2 .crop .left div:first").animate({marginLeft: '0px'}, 0);
$(".type1").find(".crop").find(".left").find("div:first").clone().insertBefore($(".type2").find(".crop").find(".left").find("div:first"));
$(".type2").find(".crop").find(".left").find("div:first").animate({marginLeft: '0px'}, 0);
$(".type1").find(".crop").find(".left").find("div:first").animate(
{marginLeft: '0px'}, {
duration: 500,
complete: function() {
$(".type1").find(".crop").find(".left").find("div:first").remove();
$(".type1").find(".crop").find(".left").find("div:first").animate({marginLeft: '208px'}, 0);
}
});
$(".type2").find(".crop").find(".left").find("div:first").animate(
{marginLeft: '208px'}, {
duration: 500,
complete: function() {
$(".type2").find(".crop").find(".left").find("div:last").remove();
isClicking=false;
}
});
});
Try to disable the button first and enable the button after finish.
$(".vid1 .next, .vid2 .next").click(function(){
$(this).attr("disabled", true);
$(".type2").find(".crop").find(".left").find("div:last").clone().insertAfter($(".type1").find(".crop").find(".left").find("div:last"));
$(".type2 .crop .left div:first").animate({marginLeft: '0px'}, 0);
$(".type1").find(".crop").find(".left").find("div:first").clone().insertBefore($(".type2").find(".crop").find(".left").find("div:first"));
$(".type2").find(".crop").find(".left").find("div:first").animate({marginLeft: '0px'}, 0);
$(".type1").find(".crop").find(".left").find("div:first").animate(
{marginLeft: '0px'}, {
duration: 500,
complete: function() {
$(".type1").find(".crop").find(".left").find("div:first").remove();
$(".type1").find(".crop").find(".left").find("div:first").animate({marginLeft: '208px'}, 0);
}
});
$(".type2").find(".crop").find(".left").find("div:first").animate(
{marginLeft: '208px'}, {
duration: 500,
complete: function() {
$(".type2").find(".crop").find(".left").find("div:last").remove();
}
});
$(this).removeAttr("disabled");
});
My code does not work. What I want is to move my pagination to the left and to the right after #prev_pag and #next_pag are clicked on. I don't know why this code isn't working?
EXAMPLE: http://jsfiddle.net/szVKD/
JS code:
$('#next_pag').click(function() {
$('#pagination').animate({
marginLeft: '-=100px'
},
500);
});
$('#prev_pag').click(function() {
$('#pagination').animate({
marginLeft: '+=100px'
},
500);
});
});
Try to animate not 'marginLeft' but 'left';
EXAMPLE:
http://www3.montonfashion.com/js/slider/carouselPP.js
http://www3.montonfashion.com/et/waistcoat-willy.html
you nedd to play with left not marginleft...see here
$('#next_pag').click(function() {
$('#pagination').animate({
left: '-=100px'
},
500);
});
$('#prev_pag').click(function() {
$('#pagination').animate({
left: '+=100px'
},
500);
});
});
$('#next_pag').click(function(e) {
e.preventDefault(); //prevent the default behaviour
$('#pagination').animate({
left: '-=100px'
},
500);
});
$('#prev_pag').click(function(e) {
e.preventDefault(); //prevent the default behaviour
$('#pagination').animate({
left: '+=100px'
},
500);
});
});