jQuery animate back when clicked anywhere on the page - javascript

<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/

Related

scroll-to-top button on a mobile website

I'm trying to make the Scroll To Top button appear once the user started scrolling down, instead of it always being present, even when being at the top. Quick note, I barely have experience with JS, so I have no idea what I'm doing.
Anyway here is the page I'm having an error on: http://www.m.evans-carpentry.com/gallery/projects/
<script>
$(function() {
var $elem = $('#content');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
}
);
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
</script>
Thanks!
you call jquery earlier announcements of jquery on line 30
<script>$('#nav Li: has (ul)').doubleTapToGo ();</script>
insert this line after the call jquery
Your code is too complex, try this:
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
".scrollToTop" is the thing to be clicked that scrolls back to the top of the page.

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.

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/

Jquery Image Slide Up After Page Load

Pls I am working on a website. I want a situation on the home page where an image of a man standing will slide up 1 or 2 seconds after the whole page has loaded. I need someone to help me with a codepen example.
Below is the code I inserted in the head section. I set the image to display:none in css, but when I refresh, I found out it's not working. #man is the id of the image.
Thank u.
$(function() {
$("#man").one('load', function () {
$(this).show("slide", { direction: "up" }, 2000);
}).each(function() {
if(this.complete)
$(this).load();
});
});
You can try this -
$(window).load(function(){
$("#man").show("slide", {
direction: "up"
}, 2000);
});
Demo --> http://jsfiddle.net/CqR9E/2/
Not sure if you need all that...the below code will slide up after a 2000 ms delay:
slideTimer = setInterval(function() {
$('#man').slideUp();
}, 2000);
Demo: http://jsfiddle.net/tymeJV/VBtUU/

I've got a problem with a toggling sidebar using jQuery

I'm trying to create a simple toggling sidebar using jquery, where it expands and contracts when a button is pressed. The button also changes to another type of button when pressed. The sidebar will expand, but for some reason, it will not move back to it's original position.
You can see a copy of the javascript and html at http://www.jqueryhelp.com/viewtopic.php?p=4241#4241
Here is the working code, thanks Bendeway! :D
$(".btn-slide").live('click', function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "show", left: 250}, "slow");
$(this).toggleClass("btn-slide").toggleClass("active");
});
$(".active").live('click', function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "hide", left: 100}, "slow");
$(this).toggleClass("btn-slide").toggleClass("active");
});
try instead of right use left with a negative number. in addition I would recommend using preventDefault instead of returning false.
$(".active").click(function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "hide", left: -250}, "slow");
$(this).toggleClass("btn-slide");
});
Update
Another piece i just noticed is that your attaching a click event to the .active button, when the document is ready, but there is no .active button when the document is ready that comes in after you change it. There are a couple options here.
First is to use the new live feature of jquery 1.3
$(".btn-slide").live('click', function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "hide", left: 250}, "slow");
$(this).toggleClass("btn-slide").toggleClass("active");
});
$(".active").live('click', function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "hide", left: -250}, "slow");
$(this).toggleClass("btn-slide").toggleClass("active");
});
The other option would be to have set the click event on a different modifier (eg. on the id, maybe).
<span>News <img src="img/overlay.png" id="sliderButton" class="btn-slide" alt="" /></span>
then use this to handle the click
$("#sliderButton").click(function(e){
e.preventDefault();
$(this).is('.btn-slide').each(function() {
$("#sidebar").animate({opacity: "show", left: 250}, "slow");
});
$(this).is('.active').each(function() {
$("#sidebar").animate({opacity: "hide", left: -250}, "slow");
});
$(this).toggleClass("active").toggleClass('btn-slide');
});
or even more concise
$("#sliderButton").click(function(e){
e.preventDefault();
var animationSettings = {opacity: "show", left: 250};
if ($(this).hasClass('active') )
{
animationSettings = {opacity: "hide", left: -250};
}
$("#sidebar").animate(animationSettings , "slow");
$(this).toggleClass("active").toggleClass('btn-slide');
});
The final option that I can think of would be to set the click events after you change them, but I wouldn't do that so I'm not going to supply a sample.
Lastly, I would put in alert into your active callback and make sure that your active button event is actually firing.
The way your logic is written, I think you need to do a 'toggleClass' on both classes inside your click handlers which will add one and remove the other. For example, when your "active" item is clicked you toggle (add) the btn-slide class, but this will leave the "active" class in place too.
Of course instead of using "toggleClass" you could also use "addClass" and "removeClass" to be more explicit.
I recommend using a tool like Firebug to watch what's happening inside your DOM.
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#sidebar").animate({opacity: "show", left: "250"}, "slow");
$(this).toggleClass("active"); // add class
$(this).toggleClass("btn-slide"); // remove class
return false;
});
});
$(document).ready(function(){
$(".active").click(function(){
$("#sidebar").animate({opacity: "hide", right: "250"}, "slow");
$(this).toggleClass("active"); // remove class
$(this).toggleClass("btn-slide"); // add class
return false;
});
});
This works.
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#sidebar").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
$(function() {
var ecswitch = 1;
/* prevent the annoying scroll back up thing */
$("#ec").click(function(e) {
e.preventDefault();
var x = $("#main").width(); // get element width
var y = $("#main").height(); // get element height
if (ecswitch == 1) {
$("#main").animate({
opacity: 0,
hieght: "0",
width: "0"
}, 1300);
ecswitch = 0;
} else {
$("#main").animate({
opacity: 1,
hieght: y,
width: x
}, 1300);
ecswitch = 1;
}
});
});
#main {
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
Expand / Contract
<div id="main">
Watch Me Shrink Or Grow
</div>
</div>
I chose to do this a little differently. this initializes with the height of our experiment being 200px and the width is automatic. When you click the hyperlink the experiment is hidden in 1.3 seconds and a switch is set to 0. when you click again it comes back over a period of 1.3 seconds and the switch gets set back to 1. like a light switch. I used the animate here because a simple fade or hide got me bored...
The reason why I got the widths and heights of the element before zero-ing them was if said width:100%" and height: "100%" in my animate it would set it to 100% of the page's width and height...we don't want that.
NOTE: I am also using the opacity over a time period. quite nice for fading as well :)

Categories

Resources