We Keep Coding

Jquery showing and hiding div on .hover()

I am trying to use the .show("blind", "slow") Jquery-ui Effects and the .hide("blind", "slow") with .hover(). I would like to .hover() on the button and show the div, then by leaving the button I would .hide("blind", "slow"). The problem is if I leave to quickly and the div is not completely shown, then I will not go back to show to his full height once hovering back again.
This is my code and I include the js fiddle
HTML Code
<div id="state-slider">
My Slider
</div>
<button id="trigger">
Button
</button>
CSS Code
#state-slider {
position: fixed;
top: 50px;
left: -270px;
width: 500px;
min-height: 100px;
background-color: #ff9000;
}
Jquery
$(function() {
$("#trigger").hover(function() {
$("#state-slider").dequeue().stop().show("blind", "slow");
}, function() {
$('#state-slider').dequeue().stop().hide("blind", "slow");
});
});
Thanks a lot
Fabrizio

edit:
$(function() {
$("#trigger").hover(function() {
$("#state-slider").dequeue().stop(false, true).show("blind", "slow");
}, function() {
$('#state-slider').dequeue().stop(false, true).hide("blind", "slow");
});
try it this way, so it jumps to the end of any animation if you quickly hover over and back again

Launch new animation with every click in jquery

I'm trying to create simple clicker game with JS and I want to give my game some animations.
A little "$+1" should animate to the top and fade everytime I click the button. It works but only for one click.
$("#clicker").click(function(){
$("#fading_dolar").css("display","block");
$("#fading_dolar").animate({
bottom: "120px",
opacity: 0
}, {duration:1000, queue: false});
$("#fading_dolar").css({
"opacity": "1",
"bottom:": "60px"
});
});
<button id="clicker" onclick="click_f()">Click!</button>
<center><span id="fading_dolar">+$1</span></center>

Try resetting css bottom of #fading_dolar to 0px at complete of .animate()
$("#clicker").click(function() {
var el = $("#fading_dolar");
el.finish().css("opacity", 1).animate({
bottom: "120px",
opacity: 0
}, {
duration: 1000,
queue: false,
complete:function() {
$(this).css("bottom", "0px")
}
});
});
#fading_dolar {
display: block;
position: relative;
bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="clicker">Click!</button>
<center><span id="fading_dolar">+$1</span>
</center>

You need to put:
$("#fading_dolar").css({
"opacity": "1",
"bottom:": "60px"
});
inside the complete option, because that is a function to call once the animation is complete. See jQuery doc about animate.
Your code should be:
$("#clicker").click(function(){
$("#fading_dolar").css("display","block");
$("#fading_dolar").animate({
bottom: "120px",
opacity: 0
}, {duration:1000, queue: false, complete: function(){
$("#fading_dolar").css({
"opacity": "1",
"bottom:": "60px"
});
}});
});
DEMO

You should use callback function and .stop() instead of queue: false:
$("#clicker").click(function(){
$("#fading_dolar").css("display","block");
$("#fading_dolar").stop().animate({
bottom: "120px",
opacity: 0
}, 1000, function() {
$("#fading_dolar").css({
"opacity": "1",
"bottom:": "60px"
});
});
});

The effect you're after isn't very clear, but there are a couple of mistakes in your snippet:
You didn't include jQuery.
You had a handler attached to the click event from the markup that doesn't exist (and is not needed since you're attaching an event from code).
You're code first set the animate to 0 part, and then set the initial state (opacity 1).
You don't really need to set the display attribute every time.
Try this fixed fiddle
$("#clicker").click(function(){
$("#fading_dolar").css({
bottom: "0px",
opacity: 1
}); $("#fading_dolar").animate({
bottom: "120px",
opacity: 0
}, {duration:1000, queue: false});
});
#fading_dolar {
display: block;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clicker">Click!</button>
<center><span id="fading_dolar">+$1</span></center>
EDIT: There were a few other bugs / mistakes there. "bottom:": is wrong, and you should "start again" from 0px, not 60px. Also moved basic style to CSS (no need for code), and added the required "position: relative" attribute.

css transition on mouseover

I have the following css for my drop down menu in my banner:
#nav-menu li a
{
background-image:url('../images/menu_background.png');
background-repeat:repeat-x;
background-position: left top;
height: 35px;
}
#nav-menu li a:hover
{
background-image:url('../images/menu_background_hover.png');
background-repeat:repeat-x;
background-position: left top;
height: 35px;
}
It works fine, except that I would like some animation effect when I hover over the <li> tag. Currently, it just replaces the background colour of the <li> when i hover over it.
I tried the example code below which changes the margin-left of the li tag but I do not know how to animate the css transition on hover:
$j(document).ready(function () {
//When mouse rolls over
$j("#nav-menu li").hover(function () {
$j(this).filter(':not(:animated)').animate({
marginLeft: '9px'
}, 'slow');
},
function () {
$j(this).animate({
marginLeft: '0px'
}, 'slow');
});
});
Thanks a lot for any suggestion.

A quote from this post,
Blockquote
I guess you would have to work around this by not using genuine background-images, but div elements containing the image, positioned using position: absolute (or fixed) and z-index for stacking. You would then animate those divs.
Blockquote

I got this working by removing the j after the $ in the variable names.
Fiddle: http://jsfiddle.net/XjxBj/
$(document).ready(function () {
//When mouse rolls over
$("#nav-menu li").hover(function () {
$(this).filter(':not(:animated)').animate({
marginLeft: '9px'
}, 'slow');
},
function () {
$(this).animate({
marginLeft: '0px'
}, 'slow');
});
});​

how to hide a subnav menu until mouseover?

I'm working with a sub-navigation menu, where it animates the drop on mouseover. It's working great, except for that on the initial page load, the menu is showing by default. When you mouse over and out, it disappears as expected, but I can't figure out how to hide it on page load, and then make it appear on hover.
<script type="text/javascript">
function nav(){
$('.nav li').hover(function() {
$(this).find('ul:first').stop().animate({height: '200px', opacity: '100'}, {queue:false, duration:200, easing: 'easeInSine'})
}, function() {
$(this).find('ul:first').stop().animate({height: '0px', opacity: '0'}, {queue:false, duration:100, easing: 'easeInCirc'})
});
};
$(document).ready(function() {
nav();
});
</script>

Add a class to the submenu <ul>'s and add css rule to set display: none; For example:
<ul class="subMenu">
and
.subMenu { display: none; }

JQuery Animate

Really easy, I'm sure...
I have a div which is the full screen and I want it to slide down from the top to the bottom.
I have this:
$('#full-screen').animate({
"bottom":0,
height: 'toggle'
}, 1000, function() {
// Animation complete.
});
But this is the wrong way round as the bottom moves up; how do I get the bottom to stay where is is and the top to slide down to meet it?
Thanks

Your exact code works fine when you have absolute positioning on the element.
http://jsfiddle.net/hhEJD/
CSS
body {
padding: 0;
margin: 0;
}
#full-screen {
background: orange;
color: white;
width: 100%;
height: 100%;
position: absolute; // position absolute, and your code works
clip:auto;
overflow:hidden;
}​
HTML
<div id="full-screen"></div>​
Your code
$('#full-screen').animate({
"bottom":0,
height: 'toggle'
}, 1000, function() {
// Animation complete.
});
You're setting the bottom style to 0 in your animate. This has no effect if you don't use absolute positioning on your element.

You need to also animate the 'top' property of the div as well as disabling the animation queue so both animations happen at the same time.
$('#slide2').animate(
{height: '0px'},
{
duration: 1000,
queue: false, //Disable the queue so both events happen at the same time.
complete: function()
{
// animation complete
}
}
).animate( //also animate the top property
{top: '500px'},
{duration: 1000}
);​
Try it out over at jsFiddle.

You can use marginTop for it:
var h=$('#full-screen').height();
$('#full-screen')
.animate(
{marginTop: h, height: 'toggle'},
1000,
function() {
// Animation complete.
}
)
see at: http://jsbin.com/esotu3