Jquery Image Slide Up After Page Load - javascript

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/

Related

Disable scrollTop when triggering mousewheel or trackpad

I'm using a fullscreen slider and found this little snippet:
jQuery(window).ready(function(){
setTimeout(scX, 6000);
});
function scX() {
hPos = jQuery("#hideMe").offset().top;
hHeight = jQuery("#hideMe").height();
jQuery("html, body").animate({scrollTop: +(hPos + hHeight)}, 1200);
}
All it does is scrolling down to the next section after 6 seconds.
Now my question: I want to disable the snippet if the user starts scrolling before the script auto scrolls to the next section.
I hope you can help me, best regards Julian.
Try this.
jQuery(window).ready(function(){
var abc = setTimeout(scX, 3000);
$(window).scroll(function() {
clearTimeout(abc);
});
});

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/

jQuery Menu Fading Out While still on links

I have this jQuery DropDown menu that seems to work pretty well with one minor, annoying issue. When you are randomly hovered over the menu the sub menu will fade out. Not always, only randomly. The other times the sub menu seems to show fine. So only randomly does the sub menu disappear. I don't know jQuery all that well, so I was hoping someone could see what I was doing wrong. Thanks!
Code:
$(document).ready(function(){
$('#solutions-btn').hover(function(){
$('#solutions-drop').css('display','block');
$('#quality-drop').css('display','none');
$('#american-drop').css('display','none');
$('#products-drop').css('display','none');
$('#about-drop').css('display','none');
});
$('#quality-btn').hover(function(){
$('#solutions-drop').css('display','none');
$('#quality-drop').css('display','block');
$('#american-drop').css('display','none');
$('#products-drop').css('display','none');
$('#about-drop').css('display','none');
});
$('#american-btn').hover(function(){
$('#solutions-drop').css('display','none');
$('#quality-drop').css('display','none');
$('#american-drop').css('display','block');
$('#products-drop').css('display','none');
$('#about-drop').css('display','none');
});
$('#products-btn').hover(function(){
$('#solutions-drop').css('display','none');
$('#quality-drop').css('display','none');
$('#american-drop').css('display','none');
$('#products-drop').css('display','block');
$('#about-drop').css('display','none');
});
$('#about-btn').hover(function(){
$('#solutions-drop').css('display','none');
$('#quality-drop').css('display','none');
$('#american-drop').css('display','none');
$('#products-drop').css('display','none');
$('#about-drop').css('display','block');
});
var timer;
$('#main-menu a').hover(function(){
$('#drop-menu').fadeIn( 200 );
},function(){
timer = setTimeout(function(){$('#drop-menu').fadeOut( 200 );}, 1500);
});
$('#drop-menu').hover(function(){
clearTimeout(timer);
},function(){
$('#drop-menu').fadeOut( 200 );
});
});
JS Fiddle link:
http://jsfiddle.net/20wfqzxz/
Hover over the links at the bottom. Hover them for a second and you will see that they disappear even while on the link.
You need to edit your code into this:
var timer;
$('#main-menu a').hover(function(){
$('#drop-menu').fadeIn( 200 );
clearTimeout(timer);
},function(){
timer = setTimeout(function(){$('#drop-menu').fadeOut( 200 );}, 1500);
});
$('#drop-menu').hover(function(){
clearTimeout(timer);
},function(){
$('#drop-menu').fadeOut( 200 );
});
Fiddle..Hope it helps..
You can try to add a stop animation function before doing any other animation. E.g., $('#drop-menu').stop().fadeIn( 200 ); and $('#drop-menu').stop().fadeOut( 200 ); So these animations won't ruin each other.
First, stop animation before starting new animation.
$("#drop-menu").stop();
Second, remove the timer and settimeout commands - you won't need them if you stop the animation!

jQuery Tools tabs auto rotate (done) and pause on hover (done) resume on mouseout NEED HELP!

I can get the tabs to auto rotate, and pause on hover, but can't seem to get them started again when you mouse out. Also, is "fadeInSpeed" done correctly? the Please take a look and see if you can help, it's much appreciated! Really glad to see jQueryTools doing well again!
$(function() {
var rotateDelay = 3500;
var rotateTabs=true;
var $tabItems = $('#flowtabs li a').hover(function(){
rotateTabs=false;
});
var tabs = $("ul#flowtabs").tabs('#flowpanes > div', {api:true, effect:'fade', fadeInSpeed: 100, rotate: true});
function doRotateTabs(){
if (rotateTabs) {
setTimeout(function(){
if (!rotateTabs) return;
if(tabs.getIndex() == $tabItems.length-1){
tabs.click(0);
}
else {
tabs.next();
}
doRotateTabs();
}, rotateDelay);
}
}
doRotateTabs();
});
Did you ever solve this problem
Why are you writing your own code to make it auto play I just passed the configuration for sideshow and it works. It seems to be pausing on mouse over and works like a charm.
My code is below
$(function() {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow({
autoplay: 'true'
});
});
I hope this helps Adity Bajaj

Categories

Resources