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.
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.
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
I want to make a menu which slides from right to left a h2 header and when it done from up to down information. If clicked different option if menu already exists, is firstly goes up and then left else just as said. So the major problem is that in some ways there need to appear 2 infos instead of one and I can't figure how to do, that all executed one after other. If using callbacks, some of text appears two or more times...
$("a[rel~='showinfo']").click(function () {
var info_id = $(this).attr('id');//getting needed id from menu to show info
if($('.info_name').is(':visible'))//if already exists - removing
remove_contact();
for(i=0; i<contact_status.length; i++){//checking all array for item
if(info_id == contact_status[i]){//if item exist
create_contact(i);//putting it in
//here starts problems....
$('#info_name'+i).show("slide", {direction: "right"}, 1000, function(){
$('#info_info'+i).show("slide", {direction: "up"}, 1000);
});
}
}
//$('.info_name').show("slide", {direction: "right"}, 1000);
//$('.info_info').show("slide", {direction: "up"}, 1000);
});
function create_contact(id){
$('.third').append('<div class="showinfo"><h2 id="info_name'+id+'" class="info_name">'+contact_name[id]+'</h2><span class="info_info" id="info_info'+id+'">lol</span></div>')
}
function remove_contact() {
$('.info_name').hide("slide", {direction: "right"}, 1000);
$('.showinfo').remove();
}
for(i=0; i<contact_status.length; i++){//checking all array for item
if(info_id == contact_status[i]){//if item exist
(function ( idx ) { // use a Anonymous funciton
create_contact(idx );//putting it in
//here starts problems....
var;
$('#info_name'+idx ).show("slide", {direction: "right"}, 1000, function(){
$('#info_info'+idx ).show("slide", {direction: "up"}, 1000);
});
})( i );
}
}
ah, I make a mistake... this time should be right
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);}
);