Develop Reference

How can I animate a div to the right when it is pressed, and then, when it is pressed again, return it back to its first position with jQuery?

I have multiple clickable panels made with Bootstrap class panel, organized in this way:
Image of my website naoh
For example, when I click on the first panel, some other panels appear and cool stuff happens.
When you click a panel.
But I want that the panel that I clicked to be at the center. And then, when that same panel is clicked, I want to return everything to normal (which right now works with the specific panels per panel), including the main panel, so it should move to the left. The panels at the center doesn't require animation, and the right ones should animate to the left and back to the right.
Here is my jQuery code for the panels, lets say panel 2:
//Panel 2
if ($("#panel_2").data("clicked")) {
$(".navegadores").toggle(function () { });
} else {
$(".navegadores").hide();
}
$("#panel_2").click(function () {
$("#panel_2").data('clicked', true);
$(".navegadores").toggle(function () { });
console.log($("#panel_2").data("clicked"));
});
I feel I would need to use the .toggle method somehow, or the .slideToggle, but I'm quite confused atm.

Something like this should get you started:
$('#panel2').click(function(){
if ( $(this).data('clickstate') == 0 ){
$(this).animate({
marginLeft: '200px'
},1000, function(){
$(this).data('clickstate', '1');
});
}else{
$(this).animate({
marginLeft: '0'
},1000, function(){
$(this).data('clickstate', '0');
});
}
});
#panel2{position:relative;height:100px;width:100px;background:green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="panel2" data-clickstate="0"></div>

My code gets disrupted when you hover over a dropdown list item

I've made a full width menu container that drops down when you hover the button "Content Overview" (pink button on the top right).
In the container I have a WordPress categories Widget with a dropdown.
The problem is that when you click and open the dropdown list, and you hover over a list item, the menu container closes immediately.
http://www.webmotus.com/
I have no clue what causes this, other than when you hover a category list item, it disrupts the code and closes the container.
I made a Fiddle to showcase the code & HTML working http://jsfiddle.net/62erLe6y/
var upTimer = false ,
downTimer = false ,
isHover = false ;
$(".carbsanity-custom-menu-trigger,
.carbsanity-custom-menu-container").hover(function(){
isHover = true;
clearTimeout(upTimer);
downTimer = setTimeout(function(){
if(isHover)
$(".carbsanity-custom-menu-container").slideDown(500);
},500);
},function(){
isHover = false;
clearTimeout(downTimer);
upTimer = setTimeout(function(){
$(".carbsanity-custom-menu-container").slideUp(500);
},100);
});
Can someone advice me on how to change my code so that it doesn't close my menu container?
Thank you :-)

div horizontal scrolled to left from center

I am trying to apply animation jquery effect to div having list of category which is at center of page.when i am clicking on 1st category then that initial div should move to left from center and new div should appear from right to left.when clicked on 2nd category 1st div having content should move to right and 2nd content div should appear.
effect mostly same like http://livedemo00.template-help.com/wt_47602/index.html
I am able to use viewport to implement div moving from right to left but 1st transition of div having category list from center to left is not achieved.
Thank u
JS
var navClick = function() {
$viewport = $('#viewport');
$targetElem = $('#content' + $(this).data('target'));
$active = $viewport.find('.active');
$active.animate({'right': '-' + $active.width() + 'px'}, function() {
$(this).removeClass('active');
});
$targetElem.animate({'right': '100px'}, function() {
$(this).addClass('active');
});
};
$(function() {
$('nav span').on('click', navClick);
});
JSFiddle

When i quickly move my mouse pointer on menu bar slide down and slide up, it is fluctuating

(function($){
//cache nav
var nav = $("#topNav");
//add indicator and hovers to submenu parents
nav.find("li").each(function() {
if ($(this).find("ul").length > 0) {
$("<span>").text("^").appendTo($(this).children(":first"));
//show subnav on hover
$(this).mouseenter(function() {
$(this).find("ul").stop(true,true).slideDown();
});
//hide submenus on exit
$(this).mouseleave(function() {
$(this).find("ul").stop(true,true).slideUp();
});
}
});
})(jQuery);
Following is my code which i am using for slideUp and SlideDown of submenus.but when i continues slide on menu to slide down and slide up,then menus are fluctuating.

I have observed this behaviour before and I was only able to find an adequate solution by using the jQuery UI library to do effects on hide/show.
If you include the jQuery UI library you can use the following code which might not be optimal but it does not flicker or fluctuate.
//cache nav
var nav = $("#topNav");
//add indicator and hovers to submenu parents
nav.find("li").each(function() {
if ($(this).find("ul").length > 0) {
$("<span>").text("^").appendTo($(this).children(":first"));
var $subMenu = $(this).find("ul");
//show subnav on hover
$(this).hover(
function() {
// --> this causes flicker $subMenu.stop(true,true).slideDown();
$subMenu.stop(true,true).show("slide", {direction: "up"});
},
function() {
// --> this causes flicker $subMenu.stop(true,true).slideUp();
$subMenu.stop(true,true).hide("slide", {direction: "up"});
}
);
}
});
http://jsfiddle.net/3leven11/k7akm/2/

Create Jquery Drop down using Divs and maintaing dual hover

What I'm trying to do is to fade in a div by rolling over a link. Once your mouse is over the link, you're able to mouse around the div that just faded in and you can click links inside the div.
Currently I have four links and each have a div with links and images in. On hover of the link the div fades in below the link then you can move your mouse over the div and use the images + links within. On roll out of the link or the div, it should fade out. Also, if you move your mouse to another main navigation link it should fade out the previous and fade in the new div.
The problem seems to be that the previous DIV will sometimes not fade out if you rapidly move to next link. I'm drawing a blank, any ideas?
Problem solved, answer is here: http://jsfiddle.net/UkneJ/3/
This is what I'm working with: http://jsfiddle.net/DemhU/17/
$('#div1, #div2, #div3, #div4').hide();
var is_over;
var hide_dropnav = function(a) {
setTimeout(function() {
if (is_over) {
return;
} else {
var a_name = $(a).attr('data-name');
$('#' + a_name).fadeTo(250, 0);
$('#nav li a').removeClass('active');
}
}, 10);
}
$('#nav li a').hover(function() {
var elem_name = $(this).attr('data-name');
$('#' + elem_name).stop(true,true).fadeTo(150, 1);
is_over = true;
$('#nav li a').removeClass('active');
$(this).addClass('active');
var that = this;
hide_dropnav(that);
}, function(){
is_over = false;
hide_dropnav(this);
});
$('#div1, #div2, #div3, #div4').hover(function() {
is_over = true;
}, function() {
is_over = false;
});

There are a lot of ways to do this, but I threw together a quick working example of the method I've used before:
http://jsfiddle.net/UkneJ/
In this example, I'm binding hover to both the A and the DIV, and using a slight delay to check is "is either element hovered?" state.
You can also just bind hover to the wrapping LI, which makes things much simple. This only works if both your link and your div are contained in each LI, though:
http://jsfiddle.net/UkneJ/1/

possible without javascript: http://jsfiddle.net/XENww/