Animate and image up and down in jQuery - javascript

I'm trying to animate and image up and then down with jQuery.
It should behave like this:
When the page loads it shows 50% of the image. If someone clicks on the image it then animates the div up the page. If the user click again it moves back down the page.
html
<div id="slidebottom" class="slide">
<div class="inner"><img src="images/sze.jpg" alt="" class="try" /></div>
</div>
jQuery
$(document).ready(function() {
$('.try').click(function() {
$(".inner").animate({
top: '-=100px'
}, 2000);
});
});
How can I reverse the animation after click two? At the moment every time I click, the container moves up.

You can try using the .toggle() method, which takes two functions and alternates between executing each one of them on click:
$(document).ready(function(){
$('.try').toggle(function() {
$(".inner").animate({top: '-=100px'}, 2000);
}, function() {
$(".inner").animate({top: '+=100px'}, 2000);
});
});
However, I personally would use a class and CSS3 Transitions.

Try this example. Also note that in order to use the top css property you should either position: relatve; or position: absolute the .inner div.
var clicked = false
$('.try').click(function () {
if (clicked == true) {
$(".inner").animate({
top: '0px'
}, 2000);
clicked = false;
} else {
$(".inner").animate({
top: '-100px'
}, 2000);
clicked = true;
}
});​

Just put another code line underneath the first and it will animate them in order
$(document).ready(function() {
$('.try').click(function() {
$(".inner").animate({
top: '-=100px'
}, 2000);
$(".inner").animate({
top: '+=100px'
}, 2000);
});
});

Related

how to get a timeline hover animation to stop when a certain id is visible?

I am busy working on a timeline, the basic left right function of it works
the current issue I am having is that the hover function moves the timeline further than I need. I had an idea to stop the animation when the last li (#last) is visible and vise versa when the first li (#first) is visible. I think that my implementation of the jQuery might be wrong and would appreciate your assistance please. See below a JSFIDDLE and the jQuery code.
JSFIDDLE: http://jsfiddle.net/Jason1975/6nwkd2c8/84/
$(document).ready(function(){
if ($("li#last:visible")) {
stop();
} else {
$("a#next").click(function () {
$("#new").animate({
"left": "-=100px"
}, 200);
});
}
if ($("li#first:visible")) {
stop();
} else {
$("a#prev").hover(function () {
$("#new").animate({
"left": "+=100px"
}, 200);
});
}
});
There were a few things I had to change. First was your markup never had a positioning that was able to be moved. So I added position:relative; to #new.
<ul id="new" style="width: 1025px; position:relative;">
Note I also removed the translate property as you were using jQuery's animate, and translate is for CSS3 animations.
I also changed the hover functions to this:
var containerWidth = $('#container').width();
$('a#next').hover(function(){
$("#new").animate({
"left": -Math.abs(containerWidth) - 150
}, 1000);
}, function(){
$("#new").stop();
});
$('a#prev').hover(function(){
$("#new").animate({
"left": 50
}, 1000);
}, function(){
$("#new").stop();
});
And added it inside your document.ready function. I hope this helps!
Here is a working DEMO.

jQuery animate back when clicked anywhere on the page

<script type="text/javascript">
$(function (){
$(".links").click(function(){
$('.slider').stop(true,false).animate({right: "0" }, 800, 'easeOutQuint' ); },
function(){
$(".slider").stop(true,false).animate({right: "-200" }, 800, 'easeInQuint' ); },1000);
});
</script>
I am building a little slider on my website. The slider position is right: -200. It slides to position right:0 I want to animate it back to position right: -200 after clicking anywhere else on the page.
I tried all the ways which failed. toggle(slide) works good but doesn't looks good.
well, here you go
$(document).click(function(e){
e.preventDefault();
if($(e.target).closest("your_slider_selector").length) return;
//here you can do what you want
});
Bind click on all document, stop current animation, run new animation.
$(document).click(function () {
$('.slider').stop(true).animate({right: -200}, 500);
});
Store the CSS value in a variable before you animate the slider:
var right = $('.slider').css("right");
And then you can just use the variable:
$('.slider').stop(true).animate({right: right}, 800);
Here an example: http://jsfiddle.net/ctdjkrLx/2/

Slide Out on Hover?

$(document).ready(function() {
$("#slide").delay(5000).animate({right: 0}, 500);
});
#slide {
position: absolute;
right: -155px; overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide"><img src="pic.jpg"></div>
Right now my code is working with a delay of 5 seconds then the photo slides out from the right side. I need to change this so it stays in the "right:-155" position until you hover over the image. Once you hover it should slide out to "0" and hold it there for about 6 seconds. If the user moves the mouse off it should just go back to the original position.
Can anyone help me?
Try:
$(document).ready(function () {
$("#slide").hover(function (e) {
$(this).stop().delay(5000).animate({
right: e.type === "mouseenter" ? 0 : "-155px"
}, 500);
});
});
Or better toggle some class.
Bit late to the game, and I see you already have a "working" answer, however, think this works slightly better:
$('#slide').hover(function () {
$(this).stop( true, true ).animate({right: 0}, 500);
timeout = window.setTimeout(function(){
$('#slide').trigger('mouseleave');
}, 5000);
},function(){
window.clearTimeout(timeout);
$(this).animate({right: -500}, 500);
});
Here it is in action - http://jsfiddle.net/w7ybb/

Tool bar JavaScript Pin to / Onmouseover event conflict

I'm making a tool bar with JavaScript. This tool bar's regular height is 50px. On mouse over, it's height changes to 500px. On this toolbar however, there's a little pin to image. My intention is to make this image change the tool bar div's height to 500px and let it stay that way. Currently I can change the tool bar div with the image, but onmouseout it changes back to its original 50px height.
How can I make it so that when the pin image is clicked, the onmouseout functions stops working until the image is clicked again?
If it helps, this is my code:
//Pin to Image
<img class="pin" onClick = "document.getElementById('toolbar').style.height
= '500px';" src="images/pin.png" width="20px" height="20px" />
//JavaScript for mouseoverevent
$(document).ready(function() {
$("#toolbar").hover(
//on mouseover
function() {
$("#toolbar").animate({
height: '550'
}, 'slow');
},
//on mouseout
function() {
$(this).animate({
height: '-=500px'
}, 'slow');
}
);
});
The following code should do the trick (i have not tested if it works for sure). It can be done for sure with a better way (maybe with toggle):
<img class="pin" height="20px" src="images/pin.png" width="20px"/>
//JavaScript for mouseoverevent
$(document).ready(function() {
var isPinned = false;
$(".pin").click(function(){
$("#toolbar").css('height', '500px');
isPinned = true;
});
$("#toolbar").hover(
//on mouseover
function() {
if(!isPinned) {
$("#toolbar").animate({
height: '550'
}, 'slow');
}
},
//on mouseout
function() {
if(!isPinned) {
$(this).animate({
height: '-=500px'
}, 'slow');
}
}
);
});
remove the onclick from the image and add this:
$('.pin').click(function(){
$(this).toggleClass('.pinned');
if(parseInt($('#toolbar').css('height')) < 500) $("#toolbar").animate({
height: '550'
}, 'slow');
});
and edit the #toolbar hover function:
$("#toolbar").hover(
function() {
// return if its pinned
if($('#toolbar .pin').hasClass('pinned')) return;
$("#toolbar").animate({
height: '550'
}, 'slow');
},
function() {
// return if its pinned
if($('#toolbar .pin').hasClass('pinned')) return;
$(this).animate({
height: '-=500px'
}, 'slow');
}
);
});
now you can use the .pinned class to visualize the state of the toolbar.
Create a flag variable that stores the toolbar's state. Write a condition inside the mouseout function that bypasses the height change if the state is 'pinned'.

jQuery .animate() sets display:none, how to avoid?

I have the following code:
HTML:
<div id="clickme">
Click me :-)
</div>
<div id="info" style="background:red; width:100%; height:100px; margin-bottom:-100px; z-index:20; position:absolute; bottom:0px;">
Stay, damn!
</div>
JavaScript:
$('#clickme').click(function() {
$('#info').animate({
marginBottom: 'toggle'
},{
duration:500
});
});
It's also available at http://jsfiddle.net/DxnQJ/
Obviously, I want the #info DIV to appear/disappear whenever the #clickme DIV is clicked. It's working as intended, except that the #info DIV disappears after the animation due to jQuery setting its CSS display property to none.
How can I tell jQuery to stop hiding my DIV?
I would recommend using .slideToggle:
$('#clickme').click(function() {
$('#info').slideToggle(500);
});
Demo: http://jsfiddle.net/Daniel_Hug/DxnQJ/2
javascript code
$('#clickme').toggle(
function () {
$('#info').animate({
height:"0px"
}, 500);
},
function () {
$('#info').animate({
height:"100px"
}, 500);
});
http://jsfiddle.net/amkrtchyan/zymUK/2/
Replacing your click function with this works:
$('#clickme').click(function() {
var whichSetting = $('#info').css('marginBottom');
if(whichSetting == '-100px') {
whichSetting = '0px';
}
else {
whichSetting = '-100px';
}
$('#info').animate({
marginBottom: whichSetting
},{
duration:500
});
});

Categories

Resources