We Keep Coding

Jquery slideToggle, slideUp & stopPropagation in Firefox

I am using jquery slidetoggle & slideup so that, when a user clicks on #link, #div (which is by default hidden) slides open. Additionally, any click anywhere should slideUp and hide #div. So my script is like this:
$( document ).ready(function() {
$('#link').click(function(){
$('#div').slideToggle('fast');
event.stopPropagation();
});
$(window).click(function() {
$('#div').slideUp('fast');
});
});
This works fine in Chrome, but in Firefox the initial click to open the div also triggers the slideUp, so the div slides down and then immediately slides back up. What am I doing wrong here? Is there a better way to accomplish what I'm trying to do?

Seems like you have missed to pass event object to the listener.Correct your code to this and try..
$( document ).ready(function() {
$('#link').click(function(event){ //note here
$('#div').slideToggle('fast');
event.stopPropagation();
});
$(window).click(function() {
$('#div').slideUp('fast');
});
});
for more details refer here event.stopPropogation
hope this helps!

Dynamically applying a class to a button unable to do click event

I have two div of width 100% absolutely positioned side by side. On clicking a button I want to slide it to left. Then on clicking on same button I want it to come back to its normal position.
Here is my JsFiddle
The first part works fine, but I am not able to slide it back. The 2nd part of the jQuery code does not work. Can anyone please tell me the reason why its not working and how to make it work
<div class="about-deals">
<span class="view-tomorrow-deal">View Tomorrow Deals</span>
</div>
<div class="deals-image-wrapper">
<div class="deal-container">
<div class="today-deals">
</div>
<div class="tomorrow-deals">
</div>
</div>
</div>

try this JSFiddle
$(document).on('click', '.view-tomorrow-deal', function(event) {
$(this).removeClass('view-tomorrow-deal');
$(this).addClass('view-today-deal');
$(this).text('View Today Deals');
$('.deal-container').animate({left: '-100%'}, 1000);
});
$(document).on('click', '.view-today-deal', function(event) {
event.preventDefault();
$(this).removeClass('view-today-deal');
$(this).addClass('view-tomorrow-deal');
$(this).text('View Tomorrow Deals');
$('.deal-container').animate({left: '0%'}, 1000);
});

That's not really the way to create toggle functionality.
When you attach an event handler, that event handler is attached to any element matching the given selector at that time, changing the class later does not remove the event handler or make event handlers executed on pageload magically start working, unless they are delegated, but that makes very little sense here.
Just toggle the functionality in the same click handler, if needed use a flag etc.
$('.view-tomorrow-deal').click(function (event) {
$(this).text(function(_,txt) {
return txt == 'View Tomorrow Deals' ? 'View Today Deals' : 'View Tomorrow Deals';
});
$('.deal-container').animate({
left: $('.deal-container').position().left === 0 ? '-100%' : '0%'
}, 1000);
});
FIDDLE

Try jQuery toggle
$( "#clickme" ).click(function() {
$( "#book" ).slideToggle( "slow", function() {
// Animation complete.
});
});
or
$("#book").toggle("slide");
Link : https://api.jquery.com/slideToggle/
for slide effect
Stack link : slideToggle JQuery right to left

Slow "hide" an element while moving it toward another element on the page?

I think allrecipes.com used to do this when you favorited a recipe, the thumbnail would sort of fly up to your recipe box and then disappear
The slow/fast hide shrinks to a point, but I'd like it to do that same effect by move toward another element on the page instead of "the beginning of the line" default effect
Here is the code I'm using now from the jQuery API docs:
// Hide box on click
$( "#hideBox" ).click(function() {
$( "#box" ).hide( "fast", function() {
});
});

You need to use .animate instead. Have a look at the documentation, here. :)

show and hide div using jquery, same as mashable.com website

http://mashable.com/
I have this script:
$(document).ready(function(){
$(".show_hide5").mouseover(function(){
$('.selected').removeClass('selected');
$(this).next().fadeIn("slow").addClass('selected');
$(".slidingDiv5").not('.selected').fadeOut("slow");
});
$('.selected').removeClass('selected');
$(this).next().fadeIn("slow").addClass('selected');
$(".slidingDiv5").not('.selected').fadeOut("slow");
});
and this script is working well so far, but it's still missing something, for now it's show the div on mouseover on the arrow as you can see on mashable website but the share area don't hide on mouseout only it's hide once you put the mouse on another arrow.
all i need is to hide the share area on mouseout.
thanks in advance.

If I understand well, you want to fade out .slidingDiv5 on mouseleave event:
$(document).ready(function(){
$(".show_hide5").mouseover(function(){
$('.selected').removeClass('selected');
$(this).next().fadeIn("slow").addClass('selected');
$(".slidingDiv5").not('.selected').fadeOut("slow");
});
$(".show_hide5").mouseleave(function(){
$(".slidingDiv5").fadeOut("slow");
});
});

Div transition triggered by a tags

I am playing around with this fiddle I found which is really close to what I am trying to do:
http://jsfiddle.net/5N3YK/20/
The only thing is that when I try to change the section tags to div tags it breaks, and also I want the div's to fade instead of slide.
Help is always greatly appreciated!

Try - http://jsfiddle.net/UDt7q/21/
(function($) {
$.fn.Fader = function() {
this.each(function() {
$('a').bind('click', function(e) {
e.preventDefault();
$( "#hello div" ).fadeOut();
$( "#hello div" + $(this).attr('href') ).fadeIn();
})
});
}
})(jQuery);

Updated fiddle: http://jsfiddle.net/UDt7q/22/

This should work for you:
http://jsfiddle.net/5N3YK/23/
I changed the functionality of the code to hide the divs rather than push them off the page, but the idea is the same.
sections are now divs and they fade rather than slide.

To make something "appear", you can use
$('.selector').fadeIn();
from Jquery. Similarly, you can show(), hide(), fadeOut()