I want to know if someone can help me with this:
http://jsfiddle.net/jalxob/wMck2/7/
$(".turn_next").click(function(){
$(".box2").hide();
$(".box3").animate({height:'300px'}, 300);
$(".box3").show('slide', {direction: 'right'}, 500);
});
$(".turn_back").click(function(){
$(".box3").hide();
$(".box2").animate({height:'100px'}, 300);
$(".box2").show('slide', {direction: 'left'}, 500);
});
I want that before the slide transition between box2 (the red one) and box3 (the yellow one) the user could see the height animation because the height of both are different.
Any idea?
Thank you guys!
Do you need this?
$(".turn_next").click(function(){
$(".box2").hide();
$(".box1_content").animate({height:'300px'}, 300,function(){
$(".box3").show('slide', {direction: 'right'}, 500);
});
});
$(".turn_back").click(function(){
$(".box3").hide();
$(".box1_content").animate({height:'100px'}, 300,function(){
$(".box2").show('slide', {direction: 'left'}, 500);
});
});
DEMO
Related
I have laid out my page to have a "navigation" page that consists of 3 divs that span the page, all 33% height. When you click one of the divs the other two should slide out and the information pertaining to the div you clicked should slide in in their place. This works for the first element that is clicked, no matter which one it is. But the second one I click always wraps the element to the wrong line on slide in. Any help would be much appreciated. Each div has its own click event, I have included one of the 3 below.
$('#contactdiv').click(function(){
$('#aboutdiv').hide('slide', {direction: 'right'}, 1000);
$('#portfoliodiv').hide('slide', {direction: 'left'}, 1000);
$('#contactinfo1').show('slide', {direction: 'left'}, 1000);
$('#contactinfo2').show('slide', {direction: 'right'}, 1000);
$('#menutoggler').show('pulsate');
$('#menutoggler').click(function(){
$('#contactinfo2').hide('slide', {direction: 'right'}, 1000, function(){
$('#portfoliodiv').show('slide', {direction: 'left'}, 1000);
});
$('#contactinfo1').hide('slide', {direction: 'left'}, 1000, function(){
$('#aboutdiv').show('slide', {direction: 'right'}, 1000);
});
$('#menutoggler').hide('pulsate');
});
});
I'm assuming, you added the below piece of code in all (contactdiv, portfoliodiv, aboutdiv) of the click handlers.
$('#menutoggler').click(function(){})
So everytime you click one of the 3 menu divs, you are adding one click handler on #menutoggler.
Say you clicked on contactdiv and then aboutdiv. Now, if you click on menutoggler, the click handle on #menutoggler inside contactdiv will ALSO be executed along with the click handle on #menutoggler inside aboutdiv (sorry if i didn't explained it properly)
What you should probably do is write separate click handlers based on "task"
click handler on either of contactdiv, portfoliodiv, aboutdiv
toggle menutoggler
HTML
<div id="contactdiv" class="menuItem"></div>
<div id="portfoliodiv" class="menuItem"></div>
<div id="aboutdiv" class="menuItem"></div>
JS
var ids = ['contactdiv', 'portfoliodiv', 'aboutdiv'];
var activeMenu;
function hideOtherMenus(id) {
var otherMenus = ids.filter(function(i) {
return i !== id;
});
otherMenus.forEach(function(i) {
// you probably need more if/else conditions if you want to set the correct direction
$('#' + i).hide('slide', {direction: 'right'}, 1000);
});
}
function showInfo(id) {
if(id === 'contactdiv') {
['contactinfo1', 'contactinfo2'].forEach(function(i) {
// you probably need more if/else conditions if you want to set the correct direction
$('#' + i).show('slide', {direction: 'right'}, 1000);
});
}
// do the same for portfolio and about
}
$('.menuItem').click(function(){
activeMenu = this.id;
hideOtherMenus(activeMenu);
showInfo(activeMenu);
$('#menutoggler').show('pulsate');
});
$('#menutoggler').click(function(){
if (activeMenu === 'contactdiv') {
$('#contactinfo2').hide('slide', {direction: 'right'}, 1000, function(){
$('#portfoliodiv').show('slide', {direction: 'left'}, 1000);
});
$('#contactinfo1').hide('slide', {direction: 'left'}, 1000, function(){
$('#aboutdiv').show('slide', {direction: 'right'}, 1000);
});
}
// do the same for portfolio and about
$('#menutoggler').hide('pulsate');
});
Note: you could handle the if/else conditions better if you name the divs properly.
i already made the usual buttons but i need to make the search button on the left menu on this website
http://www.coolwebmasters.com/
when i hover on the #profilename it disappears
<div id="container">
<div class="prof"><a href="index.php"><img src="imgs/profile.png" alt="Messages"/>
</a></div>
</div>
<div id="profilename">Name</div>
$(".prof").hover(function(){
$('#profilename').show('slide', {direction: 'left'}, 280);
}, function() {
$('#profilename').hide('slide', {direction: 'left'}, 280);
});
It is because when you move the mouse out of the .prof element, the #profilename is hidden.
Try
jQuery(function ($) {
$('.prof').hover(function () {
var $target = $('#profilename');
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).show('slide', {direction: 'left'}, 280);
}, function () {
var $target = $('#profilename');
var timer = setTimeout(function () {
$target.stop(true, true).hide('slide', {direction: 'left'}, 280);
}, 200);
$target.data('hoverTimer', timer);
});
$('#profilename').hover(function () {
clearTimeout($(this).data('hoverTimer'));
}, function () {
$(this).stop(true, true).hide('slide', {direction: 'left'}, 280);
});
});
Demo: Fiddle
In the above solution, we give a 200ms time for the user to move from .prof to #profilename element, if so we clears the timeout thus the hiding of the element is prevented.
In this demo http://jsfiddle.net/vHcXN you can see that wjen you click on the link a transitions starts. First the div height changes and then the slide effect.
How can I make both works at the same time?
$(".turn_next").click(function(){
$(".box2").hide();
$(".box1_content").animate({height:'300px'}, 300,function(){
$(".box3").show('slide', {direction: 'right'}, 500);
});
});
$(".turn_back").click(function(){
$(".box3").hide();
$(".box1_content").animate({height:'100px'}, 300,function(){
$(".box2").show('slide', {direction: 'left'}, 500);
});
});
Remove the second animation from the call back of the first one,
$(".turn_next").click(function(){
$(".box2").hide();
$(".box1_content").animate({height:'300px'}, 300);
$(".box3").show('slide', {direction: 'right'}, 500);
});
$(".turn_back").click(function(){
$(".box3").hide();
$(".box1_content").animate({height:'100px'}, 300);
$(".box2").show('slide', {direction: 'left'}, 500);
});
The animation effect which you have specified in the call back function only get fired only after the initial animation completed. That's why you are seeing that effect.
DEMO
Since you're passing a function as an argument to animate, it's being used as a callback for after the animation finishes. Just call them successively:
http://jsfiddle.net/wyE92/
$(".turn_next").click(function(){
$(".box2").hide();
$(".box1_content").animate({height:'300px'}, 300);
$(".box3").show('slide', {direction: 'right'}, 500);
});
$(".turn_back").click(function(){
$(".box3").hide();
$(".box1_content").animate({height:'100px'}, 300);
$(".box2").show('slide', {direction: 'left'}, 500);
});
Note that they don't sync up exactly because you passed different lengths to the animations.
Currently, you've got the .show('slide'... function firing as a complete callback for when the .animate({'left'... function completes. Remove the callback and apply the second animation below the first:
$(".turn_next").click(function(){
$(".box2").hide();
$(".box1_content").animate({height:'300px'}, 300);
$(".box3").show('slide', {direction: 'right'}, 500);
});
$(".turn_back").click(function(){
$(".box3").hide();
$(".box1_content").animate({height:'100px'}, 300);
$(".box2").show('slide', {direction: 'left'}, 500);
});
Here is your edited fiddle showing the new animations together. Note that because of the different time lengths the two animations do not line up.
I have a website with 100% height that has a hidden footer, that needs to slide up and show it when a button is clicked, and when that button is clicked again, it should slide down and hide it.
The problem is that the sliding animation is only working when the footer slides up, and when it should slide down, it bumps without animation.
You can see the problem right here, by clicking on the "More" button in the footer.
The JS code used to manipulate that button is the following:
$(document).ready(function(){
$(".footer_container").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").slideToggle(speed);
$('html, body').animate({
scrollTop: $(document).height()
}, speed);
});
});
Thanks in advance!
Update: I just tried this code:
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").toggle(speed);
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
});
And aparently there's an animation going on the footer that I didn't know exist. Maybe that's the cause of this problem?
alright so i gave this a shot:
$('.show_hide').unbind()
$('.show_hide').click(function () {
var speed = "500";
$(".footer_container").toggle(speed);
if ($(".footer_container").data('can-see')) {
var displaced = $('.footer_container').height();
$('.twitter_footer').animate({
marginTop: "600px",
}, {
duration: speed,
complete: function () {
$('.twitter_footer').css('margin-top', "0");
}
});
}
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
$(".footer_container").data('can-see', !$(".footer_container").data('can-see'))
});
demonstration at http://jsfiddle.net/DPq5Z/
same result, another way (using absolute positioning in order to keep elements above undisturbed):
$('.show_hide').unbind()
$('.show_hide').click(function () {
var speed = "500";
$(".footer_container").fadeToggle(speed);
if ($(".footer_container").data('can-see')) {
slide_down('.twitter_footer', speed);
slide_down('.button_bg', speed);
}
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
$(".footer_container").data('can-see', !$(".footer_container").data('can-see'))
});
function slide_down(c, speed){
var tp = $(c).offset().top;
$(c).css({
'position': 'absolute',
'top': tp + "px"
});
$(c).animate({
top: tp + 170 + "px",
}, {
duration: speed,
complete: function () {
$(c).css({
'position': "relative",
'top': '0'
});
}
});
}
demonstration at http://jsfiddle.net/9R6L4/
It works as how default animations in jQuery work. If you want to customize this. You need to use jQuery easing plugin. It takes as parameter the easing effect, like easeIn, easeOut, Bounce etc.. that controls the flow. By default it is linear and that is what you see.
Easing Plugin: https://github.com/gdsmith/jquery.easing
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").fadeToggle(speed);
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
});
jsFiddle: http://jsfiddle.net/vvmYH/4/
I use the following code to slide out a div on a mouse-over, wait a couple of seconds and slide the div back.
$(document).ready(function()
{$("#divider").mouseover(function ()
{$("#slider").show("slide", {direction: "left"}, 1000).pause(2000).hide("slide", {direction: "left"}, 1000);}
);}
);
I'm sure this is simple, but I have limited Javascript/jQuery knowledge. How do I make it so any mouse activity on the trigger is ignored until the animation completes? Right now, if while the div is open you mouse over the trigger area it "remembers" and plays the animation for as many times as you've moved the pointer through the trigger area. Page
I'd suggest removing the event from your divider until the animation is finished, than using the hide callback function to add that event handler back in.
$(document).ready(function() {
function divider_mouseover() {
$('#divider').unbind('mouseover');
$("#slider")
.show("slide", {direction: "left"}, 1000)
.pause(2000)
.hide("slide", {direction: "left"}, 1000, function() {
$("#divider").mouseover(divider_mouseover);
});
};
$("#divider").mouseover(divider_mouseover);
};
Don't bind and unbind and rebind instead use a flag to decide if you should care about the event.
$(document).ready(function(){
$("#divider").mouseover(function(){
var $this = $(this);
if($this.data('nomouse')) return;
$this.data('nomouse',true);
$("#slider")
.show("slide", {direction: "left"}, 1000)
.pause(2000)
.hide("slide", {direction: "left"}, 1000, function() {
$this.data('nomouse',false);
});
});
});
Binding and unbinding was of one Paul Irish's jQuery Anti-Patterns in the yayQuery podcast
Swizzle out the event handler (not sure if this works, but something along these lines):
var omo = function() {
{$("#divider").mouseover(function () {});}
slide();
}
var slide = function() {
{$("#slider").show("slide", {direction: "left"}, 1000)
.pause(2000)
.hide("slide", {direction: "left"}, 1000);
}
{$("#divider").mouseover(omo);}
}
$(document).ready(function()
{$("#divider").mouseover(omo);}
);