I am trying to create an element which is able to disappear after clicking on it. The code apparently works but, if you try to click the div multiple times you will see that the animation restarts and executes multiple times.
Is there a way to make it play just once even if multiple clicks are applied on it?
Here's what I've got:
$(document).ready(
function() {
$('#movingDiv').click(function() {
$(this).hide('slide', {
direction: 'right'
}, 1000);
});
});
#movingDiv {
width: 50%;
height: 3em;
border: 3px solid red;
color: #000;
background-color: orange;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<div id="movingDiv">Some content.</div>
You need to clear the animation queue on each click, instead of stacking up the animations. You can use stop() to achieve this:
$(document).ready(function(){
$('#movingDiv').click(function() {
$(this).stop().hide('slide', { direction: 'right' }, 1000);
});
});
Working example
this makes the animation stop momentarily when you click on it
This is true. It's due to the easing effect on the element animation. A possible workaround is to only allow a single click on the element to hide it.
$('#movingDiv').one('click', function() {
$(this).hide('slide', { direction: 'right' }, 1000);
});
Working example
Use 'unbind' to remove the click handler on the first click.
$(document).ready(
function() {
$('#movingDiv').click(function() {
$(this).unbind('click').hide('slide', {
direction: 'right'
}, 1000);
});
});
#movingDiv {
width: 50%;
height: 3em;
border: 3px solid red;
color: #000;
background-color: orange;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<div id="movingDiv">Some content.</div>
Related
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.
I have a bunch of colored areas and when I enter any of them, I want the text to fade out. When I'm leaving the colored area, I want the text to fade in. This far, it's easy. The problem arises when I leave an area and enter an adjacent one.
If I only toggleIn() and toggleOut(), it works, but the fading effect makes the text appear and then re-disappear again, which looks stupid.
The extra problem is that the areas can't be placed in a single holder because they are not rectangularly positioned (and, in fact, it's parts of a SVG based pie chart drawn with D3).
I've been testing an external variable to keep track in the entry is made from outside of all areas or from outside of this but inside of another, adjacent area). Didn't quite managed to work it out.
How to make it happen in this fiddle?
$(".dragon")
.on("mouseenter", function(target) {
$("#indicator").fadeOut();
})
.on("mouseleave", function(target) {
$("#indicator").fadeIn();
});
The fadeIn() and fadeOut() functions can take an options parameter. One of the options is queue. If you set that to false on the fadeOut(), then it will interrupt the fade in animation. You won't see the full opacity text when you move between hover targets.
$(".dragon")
.on("mouseenter", function(target) {
$("#indicator").fadeOut({queue: false});
})
.on("mouseleave", function(target) {
$("#indicator").fadeIn();
});
div {
width: 200px;
height: 200px;
text-align: center;
}
.uno {
background-color: blue;
}
.duo {
background-color: yellow;
}
#indicator {
color: red;
font-family: Tahoma;
font-size: 32px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dragon uno"></div>
<div class="dragon duo"></div>
<div id="indicator"><hr>Enter the dragon!</div>
Update
There seems to be an issue with jQuery's fadeIn() and fadeOut() functions where they get confused by mouseenter and mouseleave events that are quick in succession. Switching to using the animate() function directly seems to fix the problem though.
$(".dragon")
.on("mouseenter", function(target) {
$("#indicator").animate({opacity: 0}, {queue: false});
})
.on("mouseleave", function(target) {
$("#indicator").animate({opacity: 1});
});
$(".dragon")
.on("mouseenter", function(target) {
$("#indicator").animate({opacity: 0}, {queue: false});
})
.on("mouseleave", function(target) {
$("#indicator").animate({opacity: 1});
});
div {
width: 200px;
height: 200px;
text-align: center;
}
.uno {
background-color: blue;
}
.duo {
background-color: yellow;
}
#indicator {
color: red;
font-family: Tahoma;
font-size: 32px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dragon uno"></div>
<div class="dragon duo"></div>
<div id="indicator"><hr>Enter the dragon!</div>
When you go from a dragon area to another the first one's mouseleave() event will rise and the second one's mouseenter() event will rise. That's why it shows the text and hide it again. This is what i resolved by updating your jsfiddle.
As I inderstood from your question when the user enters to the ".dragon" area you want to hide the text. And when passing from a ".dragon" element to another instead of just showing and hiding the text you want the text to just stay hidden.
A solution i can think of is in the document ready function you can create two global variables for bottom-right corner of the ".dragon" elements. Let's say the variables are (according to the size of your Jsfiddle);
var globalX = 200;
var globalY = 400;
And you put your fade functionality into mousemove() event.
$('body').mousemove(function(event){
if(event.pageY > 400 || event.pageX > 200){
$("#indicator").fadeIn();
}
else{
$("#indicator").fadeOut();
}
});
What you require is a delay in checking mouse after it leaves an element. See my example using isHover variable with a 300ms delay using setTimeout()
Update: Shorten delay to 50ms, assuming colored areas are side by side.
var isHover = false;
$(".dragon")
.on("mouseenter", function(target) {
isHover = true;
checkHover();
})
.on("mouseleave", function(target) {
isHover = false;
setTimeout(function(){ checkHover(); }, 50);
});
function checkHover() {
if (isHover) {
$('#indicator').fadeOut();
} else {
$('#indicator').fadeIn();
}
}
div {
width: 50px;
height: 50px;
text-align: center;
}
.uno {
background-color: blue;
}
.duo {
background-color: yellow;
}
#indicator {
color: red;
font-family: Tahoma;
font-size: 32px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dragon uno"></div>
<div class="dragon duo"></div>
<div id="indicator"><hr>Enter the dragon!</div>
I am writing a plugin for showing ajax content.It is wrapped in a ajax-content-wrap.I have applied jquery animate() but not smooth with auto height.And fade() function is also animating.But when i use a specific height animate() works and fadeIn() does not works.
my html codes are below
<div class="ajax-content-wrap">
<div class="ajax-content-show">
//here to show contents from external files
</div>
</div>
My jquery
$('.ajax-content-show').animate({height:'200px'}, function(){
$(this).fadeIn('slow', function(){
$(this).fadeIn('slow').load(url);
})
});
My css
.ajax-content-show{
padding: 20px 20px;
display: block;
border: 1px solid #eee;
margin: 10px 0;
}
If I understand what you are trying to acheive here is a solution:
$('.ajax-content-show').animate({
height: '200'
}, 500, "linear",
function () {
$('.ajax-content-show').hide(0, function () {
$('.ajax-content-show').load(url, function () {
$('.ajax-content-show').fadeIn('slow')
});
});
});
If not, can you explain (in steps) what you require, first make "div" 200px then fade in "loaded page" or do them both simultaneously?
Note: Don't need to include the 'px' when setting the height property, JQuery assumes pixels as a default.
May this you want ?
See snippet.
$(".ajax-content-show").load("https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", function(){
$(this).slideDown(10000); // change the time, or just remove it if you think too slow.
$(this).addClass("loaded");
});
.ajax-content-show{
padding: 20px 20px;
display: none;
border: 1px solid #eee;
margin: 10px 0;
height: auto;
opacity: 0;
transition: opacity 5s ease;
max-height: 500px; /* This just for show that sliding is working */
}
.ajax-content-show.loaded {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ajax-content-wrap">
<div class="ajax-content-show">
//here to show contents from external files
</div>
</div>
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.
I'm tying to make text fadeIn and stay visible while the mouse pointer is in the container and only when the mouse pointer leaves the designated area, only then must the text fadeOut but for some reason its not working, the text will fadeOut even when the mouse is inside the container.
I'm using Jquery lib 1.10.1 as well as Jquery ui 1.11.0
Here is the code:
HTML
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div class="hold">
<div class="conti">
<div class="arrow-right"></div>
</div>
<div class="text-fade"></div>
</div>
CSS
.hold{
width: 142px;
background: yellow;
overflow: hidden;
padding:10px;
}
.conti{
width: 30px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid green;
}
.text-fade{
display: none;
float: right;
margin-top:-30px;
margin-left: 10px;
margin-right:10px;
}
JS
$('.hold').mouseenter(function () {
$('.arrow-right').effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').text("this is a test text").fadeIn(1000).css('display',"block");
});
$('.hold').mouseout(function () {
$('.text-fade').fadeOut(1000);
});
This is the link to my fiddle example
mouseout is triggered by children, use mouseleave instead
$('.hold').mouseenter(function () {
// var d = $('.arrow-right');
// d.effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').text("this is a test text").fadeIn(1000);
});
$('.hold').mouseleave(function () {
$('.text-fade').fadeOut(1000);
});
JS fiddle updated
Put the text directly into ".text-fade" and give some transition to the ".text-fader" class. Then change the text color via JS.
Here's the code for changing from #FFFFFF to #000000 and back again:
$('.hold').mouseenter(function () {
$('.arrow-right').effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').css('color', '#000000');
});
$('.hold').mouseout(function () {
$('.text-fade').css('color', '#FFFFFF');
});
You are using the wrong functions, its mouseenter() and mouseleave()
working fiddle here
your javascript
$('.hold').mouseenter(function () {
$('.text-fade').text("this is a test text");
$('.text-fade').fadeIn(1000);
$('.text-fade').show();
});
$('.hold').mouseleave(function () {
$('.text-fade').fadeOut(1000);
});
also that bounce function you had seems to cause some problems that I could not find out why so I removed it