How to combine setTimeout() function with jquery stop() function? - javascript

I know to use stop() function to force queuing operations. For instance,
$(seletor).stop().fadeIn();
It prevents multiple fade effects when user triggers the mouseenter or mouseouter events.
Now I want to use stop() function with setTimeout() function or something else to prevents multiple mimic queuing effects.
Here is HTML:
<div class="container">
<div class="inner"></div>
<div class="inner2"></div>
</div>
CSS:
.container{
width: 200px;
height: 400px;
overflow: scroll;
background-color: #ccc;
position: relative;
}
.inner, .inner2{
width: 10px;
height: 500px;
background-color: red;
}
.inner{
display: none;
}
.inner2{
position: absolute;
left: 10px;
top: 0;
background-color: green;
}
JS:
$(function(){
//$(".container").stop().on("scroll", function(){
$(".container").on("scroll", function(){
$(".inner").stop().fadeIn();
setTimeout(function(){
$(".inner").stop().fadeOut();
}, 1000);
});
});
And jsfiddle ftw:)
My purpose is to trigger the setTimeout function to hide the red part when user scroll the div. But as I said before, I do not know how to combine stop() and setTimeout() function together. The red part would fadein and fadeout many times with a sequence when scroll multiple times.
Please help me, many thanks!

If you want it to keep fading in/out, you should chain the .fadeIn().fadeOut()
Something like this may be more what you're looking for...
$(function(){
var ref = null;
$(".container").on("scroll", function(){
clearTimeout(ref);
$(".inner").stop().fadeIn();
ref = setTimeout(function(){
$(".inner").stop().fadeOut();
}, 1000);
});
});
This will keep tacking on fadin/out events for animation, then when you stop scrolling for a second, the stop/fadeout takes hold.

Related

Javascript Make Div appear for 2 seconds after mouse press

I've been having problems with creating a colored block which is hidden, and then appears after a mouse press (no where specific, anywhere on the page), then stays there for 2 seconds and then disappears again... until another mouse press happens, and the whole thing happens again. Have been experimenting with '.click(function' and other things but haven't been able to make it work.
At the moment I have a DIV layer like this...
HTML:
<div class="overlay"></div>
CSS:
.overlay {
position: absolute;
z-index: 1000;
right: 240px;
top: 500px;
width: 1000px;
height: 100px;
background: rgba(255, 255, 200, 100);
}
I'm quite new to javascript so any advice will be very helpful.
You can do it using setTimeout in jQuery
$( "#target" ).on( "click", function() {
$("#messageBox").hide().slideDown();
setTimeout(function(){
$("#messageBox").hide();
}, 2000);
});
#messageBox {
display:inline-block;
float:right;
border:1px solid #060;
background:#FFC;
padding:10px 20px;
box-shadow:2px 2px 4px #666;
color:#060;
font-weight:bold;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="messageBox">
Hi there.
</div>
<input type="button" id ="target" value="click"/>
The jQuery(document) does the trick as it will consider click for the whole document and not to a specific place on page.
jQuery(document).click(function(event) {
var $div = $(".overlay");
if ($div.is(":visible")) { return; }
$div.show();
setTimeout(function() {
$div.hide();
}, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Doing this you do need a target div or element to fire an event on click. This will allow you to fire the event on the whole document.

JQuery selector with many function doesn't work properly

The method that I invoke:
vm.progress = function () {
$('.progress-line').width('100%').animate({ width: 0 }, 5, 'linear', 1000);
}
HTML:
<div class="progress-outer">
<div class="progress-line red"></div>
</div>
CSS:
.progress-outer {
position: relative;
height: 10px;
width: 100%;
}
.progress-line {
position: absolute;
height: 100%;
width: 0;
}
It has to animate progress bar from 100% to 0 in 5 secs. But it doesn't work. However, if I separate methods into two functions and invoke them by clicking on button (and only), it works.
You wrote wrong syntax to chaining animate function check the below code
setInterval(function () {
$(".progress-line").animate({width:
"100%"},5000).animate({width:"0%"},6000);
},5000);
Check working demo jsfiddle
For Time limit, you should use
$(".progress-line").animate({width: "100%"},5000); // time 5000 is in milliseconds
Here is the fiddle that may help you. I use background colors to show the animation
https://jsfiddle.net/simerjit/rgskzcj5/2/
Check jquery animate function details here... http://www.w3schools.com/jquery/eff_animate.asp

On mobile, how can I keep an orientation change from breaking Jquery touchstart/touchend?

I have a small sample app here: http://codepen.io/DouglasGlover/full/OPpMaV/
This is a mobile-only experience (though it technically functions on desktop as well). Only concerned about mobile here.
The intended behavior is that a user touches their phone, and holds their finger down on the phone (anywhere on the screen). As they do this, the counter goes up. When they let their finger come off the phone, it stops the counter.
There is a use case where a user may (perhaps accidentally) rotate their phone just enough that the site's orientation switches. Currently, if that happens, the counter continues to count infinitely upwards. Subsequent touches initiate a second touch event, which makes it go faster (I can deal with that, fixing the initial issue should fix this).
So my problem seems to be that upon switching orientation, the touch event "dies". So "touchstart" fires initially, and I'm waiting for a "touchend" which never gets to fire.
Ideally, the user can touch the phone, then rotate it without consequence (and without breaking the experience).
Here's the prototype code as it stands now...
HTML:
<div class="touchspace"></div>
<div class="ls">
<div class="counter">0</div>
</div>
<div class="pt">
<div class="counter">0</div>
</div>
CSS:
body{ margin: 0; }
.ls, .pt{ display: block; width: 100vw; height: 100vh; }
.ls{ background: lightblue; }
.pt{ background: lightgreen; }
.counter{ display: block; position: relative; top: 10%; font-weight: bold; color: white; font-size: 20vw; width: 20%; margin: 0 auto; }
.touchspace{ display: block; position: absolute; bottom: 0; right: 0; background: transparent; z-index: 999; background: red; width: 500vw; height: 500vh; opacity: .5; }
#media all and (orientation:landscape){ .ls{ display: none; } }
#media all and (orientation:portrait){ .pt{ display: none; } }
JS:
var counter = 0,
interval;
$(".touchspace").bind("touchstart mousedown",function(){
interval = window.setInterval(function(){
counter++;
$(".counter").html(counter);
}, 1000);
});
$(".touchspace").bind("touchend mouseup",function(){
window.clearInterval(interval);
});
Can you bind the orientationchange event to trigger an end and a start, or will that cause too much of a break in the user experience.
something like:
$(window).on('orientationchange', function () {
$('.touchspace').trigger('touchend');
$('.touchspace').trigger('touchstart');
});
Inside the interval, check if the initial orientation is changed and clear the interval. Not able to test the code as I do not have the environment!
var counter = 0,
isOrientationChanged=false,
interval;
$(".touchspace").bind("touchstart mousedown",function(){
interval = window.setInterval(function(){
counter++;
$(".counter").html(counter);
//check if orientation is changed, clear the interval & reset the flag
if(isOrientationChanged)
{
isOrientationChanged=false;
window.clearInterval(interval);
}
}, 1000);
});
$(".touchspace").bind("touchend mouseup",function(){
window.clearInterval(interval);
});
$(window).on('orientationchange', function () {
isOrientationChanged=true;//mark the flag true
});
I've spend last 2 hours trying to achieve it. It seems that it is unable right now - current prior of art. "orientationchange" loses focus of the element.

mouseover animation weird behaviour

I'm creating a simple animation with jquery.
The animation consists on a div being slided left when the mouse hovers it.
This is my html:
<div class="item">
<div class="content" onmouseover="over(this)" onmouseout="out(this)">
<div class="image">
<img src="http://aranciamato.it/wp-content/uploads/2013/09/insetti-700x250.jpg" width="300"/>
</div>
<div class="text">
Some useful content
</div>
</div>
</div>
This is the js:
function over(element) {
$(element).stop().animate({left: "-250"}, 500);
}
function out(element) {
$(element).stop().animate({left: "0"}, 500);
}
This is the css:
.item {
position: relative;
width: 300px;
height: 107px;
overflow:hidden;
}
.item .content {
position: absolute;
top:0;
left:0;
width: 600px;
height: 107px;
}
.item .content .image {
position:absolute;
top: 0;
left: 0;
}
.item .content .text{
position:absolute;
top: 0;
left: 300px;
width: 250px
}
.item {
border: 1px solid black;
}
The animation works properly, but I noticed that if you move the cursor over the left border of the .image div while the animation is running, it pauses for a moment and then resumes.
I don't know how to explain this better, so here you can find a JSFiddle, and here you can find a video that demonstrates the behaviour
My question is: Why is the animation behaving like this? How can I make the animation continue without pausing?
Use mouseenter and mouseleave instead
<div class="content" onmouseenter="over(this)" onmouseleave="out(this)">
DEMO
Your jsfiddle is working for me. Also, its better for you to use the $(el).hover() function jQuery provides, for example:
$('.content').hover(function() {
// Mouseover
}, function() {
// Mouseout
});
Well, you can use your hover event on the parent element (in this case .item) and animate the child element (.content). If you're using jQuery, just use .hover () instead of those two mouse events.
When you move the cursor out of the image div then a mouseout event fires - you move out of the image - and the out function is called, making the animation stop. Right after that the mouseover event fires - you move over the text - and the over function is called.
You attached the event handlers to the content div, i.e. they are called whenever the event fires on itself, but also when the event fires on one of it's descendants.
The reason why it's working with mousenter and mouseleave is that those events are handled differently by the browser. But be aware that they are not supported by all browsers.

jQuery fadeIn fadeOut background problem

When I fadeIn a div, and this animation finished, the background suddenly disappears (this time only in Firefox).
I have a container, with two nested elements in it. The second element has a negative margin, so it appears on top of the first.
My script:
jQuery(document).ready(function($) {
$(".second_element").hide();
$(".container").each(function () {
$(this).mouseover(function () {
$(this).children(".second_element").stop(true, true);
$(this).children(".second_element").fadeIn(250, 'linear');
});
$(this).mouseout(function () {
$(this).children(".second_element").stop(true, true);
$(this).children(".second_element").fadeOut(100, 'linear');
});
});
});
CSS:
.container{
width: 221px;
height: 202px;
display: block;
float: left;
position: relative;
}
.first_element {
height: 200px;
width: 219px;
}
.second_element {
display:none;
background: #fff !important;
margin-top: -51px;
width: 219px;
height: 50px;
}
And for clarity, this a HTML example
<td class="container">
<div id="first_element">...</div>
<div id="second_element">...</div>
</td>
My second problem is, that when my mouse is hovering above the second element, the function is executed again (so the second element fades out and in). While the second element is just IN the container
This is shorter, and also, for first run, it is better that hide target by fadeOut() instead of hide()
$(".caption").fadeOut(1);
$(".container").each(function() {
$(this).mouseover(function() {
$(".caption", this).stop().fadeIn(250);
});
$(this).mouseout(function() {
$(".caption", this).stop().fadeOut(250);
});
});
Complementing the last comments; I got it. I tried it in several ways, and also with the caption to position: absolute, but instead I had to set the first element to position: absolute... now it works (however not with fading, but this is fine). I thank you very much for all your help and support!

Categories